@babylonjs/viewer/lib/index.d.ts

The Babylon Viewer aims to simplify a specific but common Babylon.js use case: loading, viewing, and interacting with a 3D model.

import { HotSpotQuery, LoadAssetContainerOptions, IDisposable, AssetContainer, Nullable, PickingInfo, Camera, AbstractEngine, AbstractEngineOptions, EngineOptions, WebGPUEngineOptions } from '@babylonjs/core/index.js';
import { MaterialVariantsController } from '@babylonjs/loaders/glTF/2.0/Extensions/KHR_materials_variants.js';
import { ArcRotateCamera } from '@babylonjs/core/Cameras/arcRotateCamera.js';
import { Vector3 } from '@babylonjs/core/Maths/math.vector.js';
import { Observable } from '@babylonjs/core/Misc/observable.js';
import { SnapshotRenderingHelper } from '@babylonjs/core/Misc/snapshotRenderingHelper.js';
import { Scene } from '@babylonjs/core/scene.js';
import * as lit from 'lit';
import { LitElement, CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
import { Color4 } from '@babylonjs/core/Maths/math.color.js';
import * as lit_html from 'lit-html';

type ResetFlag = "source" | "environment" | "camera" | "animation" | "post-processing" | "material-variant" | "shadow";
declare const shadowQualityOptions: readonly ["none", "normal", "high"];
type ShadowQuality = (typeof shadowQualityOptions)[number];
declare const toneMappingOptions: readonly ["none", "standard", "aces", "neutral"];
type ToneMapping = (typeof toneMappingOptions)[number];
declare const ssaoOptions: readonly ["enabled", "disabled", "auto"];
type SSAOOptions = (typeof ssaoOptions)[number];
type ActivateModelOptions = Partial<{
    source: string | File | ArrayBufferView;
}>;
type LoadModelOptions = LoadAssetContainerOptions;
type CameraOrbit = [alpha: number, beta: number, radius: number];
type CameraTarget = [x: number, y: number, z: number];
type CameraAutoOrbit = {
    /**
     * Whether the camera should automatically orbit around the model when idle.
     */
    enabled: boolean;
    /**
     * The speed at which the camera orbits around the model when idle.
     */
    speed: number;
    /**
     * The delay in milliseconds before the camera starts orbiting around the model when idle.
     */
    delay: number;
};
type EnvironmentParams = {
    /**
     * The intensity of the environment lighting.
     */
    intensity: number;
    /**
     * The blur applied to the environment lighting.
     */
    blur: number;
    /**
     * The rotation of the environment lighting in radians.
     */
    rotation: number;
};
type ShadowParams = {
    /**
     * The quality of shadow being used
     */
    quality: ShadowQuality;
};
type PostProcessing = {
    /**
     * The tone mapping to use for rendering the scene.
     */
    toneMapping: ToneMapping;
    /**
     * The contrast applied to the scene.
     */
    contrast: number;
    /**
     * The exposure applied to the scene.
     */
    exposure: number;
    /**
     * Whether to enable screen space ambient occlusion (SSAO).
     */
    ssao: SSAOOptions;
};
/**
 * Generates a HotSpot from a camera by computing its spherical coordinates (alpha, beta, radius) relative to a target point.
 *
 * The target point is determined using the camera's forward ray:
 *   - If the ray intersects with a mesh in the model, the intersection point is used as the target.
 *   - If no intersection is found, a fallback target is calculated by projecting the distance
 *     between the camera and the model's center along the camera's forward direction.
 *
 * @param model The reference model used to determine the target point.
 * @param camera The camera from which the HotSpot is generated.
 * @returns A HotSpot object.
 */
declare function CreateHotSpotFromCamera(model: Model, camera: Camera): Promise<HotSpot>;
type ViewerDetails = {
    /**
     * Provides access to the Scene managed by the Viewer.
     */
    scene: Scene;
    /**
     * Provides access to the Camera managed by the Viewer.
     */
    camera: ArcRotateCamera;
    /**
     * Provides access to the currently loaded model.
     */
    model: Nullable<Model>;
    /**
     * Suspends the render loop.
     * @returns A token that should be disposed when the request for suspending rendering is no longer needed.
     */
    suspendRendering(): IDisposable;
    /**
     * Marks the scene as mutated, which will trigger a render on the next frame (unless rendering is suspended).
     */
    markSceneMutated(): void;
    /**
     * Picks the object at the given screen coordinates.
     * @remarks This function ensures skeletal and morph target animations are up to date before picking, and typically should not be called at high frequency (e.g. every frame, on pointer move, etc.).
     * @param screenX The x coordinate in screen space.
     * @param screenY The y coordinate in screen space.
     * @returns A PickingInfo if an object was picked, otherwise null.
     */
    pick(screenX: number, screenY: number): Promise<Nullable<PickingInfo>>;
};
/**
 * The options for the Viewer.
 */
type ViewerOptions = Partial<{
    /**
     * Called once when the viewer is initialized and provides viewer details that can be used for advanced customization.
     */
    onInitialized: (details: Readonly<ViewerDetails>) => void;
    /**
     * The default clear color of the scene.
     */
    clearColor: [r: number, g: number, b: number, a?: number];
    /**
     * When enabled, rendering will be suspended when no scene state driven by the Viewer has changed.
     * This can reduce resource CPU/GPU pressure when the scene is static.
     * Enabled by default.
     */
    autoSuspendRendering: boolean;
    /**
     * The default source model to load into the viewer.
     */
    source: string;
    /**
     * The default environment to load into the viewer for lighting (IBL).
     */
    environmentLighting: string;
    /**
     * The default environment to load into the viewer for the skybox.
     */
    environmentSkybox: string;
    /**
     * The default environment configuration.
     */
    environmentConfig: Partial<EnvironmentParams>;
    /**
     * The default camera orbit.
     * @remarks The default camera orbit is restored when a new model is loaded.
     */
    cameraOrbit: Partial<CameraOrbit>;
    /**
     * The default camera target.
     * @remarks The default camera target is restored when a new model is loaded.
     */
    cameraTarget: Partial<CameraTarget>;
    /**
     * Automatically rotates a 3D model or scene without requiring user interaction.
     * @remarks The default camera auto orbit is restored when a new model is loaded.
     */
    cameraAutoOrbit: Partial<CameraAutoOrbit>;
    /**
     * Whether to play the default animation immediately after loading.
     * @remarks The default animation auto play is restored when a new model is loaded.
     */
    animationAutoPlay: boolean;
    /**
     * The default speed of the animation.
     * @remarks The default animation speed is restored when a new model is loaded.
     */
    animationSpeed: number;
    /**
     * The default selected animation.
     * @remarks The default selected animation is restored when a new model is loaded.
     */
    selectedAnimation: number;
    /**
     * The default post processing configuration.
     */
    postProcessing: Partial<PostProcessing>;
    /**
     * Shadow configuration.
     */
    shadowConfig: Partial<ShadowParams>;
    /**
     * The default selected material variant.
     * @remarks The default material variant is restored when a new model is loaded.
     */
    selectedMaterialVariant: string;
    /**
     * The default hotspots.
     */
    hotSpots: Record<string, HotSpot>;
    /**
     * Boolean indicating if the scene must use right-handed coordinates system.
     */
    useRightHandedSystem: boolean;
}>;
/**
 * The default options for the Viewer.
 */
declare const DefaultViewerOptions: {
    readonly clearColor: [0, 0, 0, 0];
    readonly autoSuspendRendering: true;
    readonly environmentConfig: {
        readonly intensity: 1;
        readonly blur: 0.3;
        readonly rotation: 0;
    };
    readonly environmentLighting: "auto";
    readonly environmentSkybox: "none";
    readonly cameraAutoOrbit: {
        readonly enabled: false;
        readonly delay: 2000;
        readonly speed: 0.05;
    };
    readonly animationAutoPlay: false;
    readonly animationSpeed: 1;
    readonly shadowConfig: {
        readonly quality: "none";
    };
    readonly postProcessing: {
        readonly toneMapping: "neutral";
        readonly contrast: 1;
        readonly exposure: 1;
        readonly ssao: "auto";
    };
    readonly useRightHandedSystem: false;
};
type EnvironmentOptions = Partial<Readonly<{
    /**
     * Whether to use the environment for lighting (e.g. IBL).
     */
    lighting: boolean;
    /**
     * Whether to use the environment for the skybox.
     */
    skybox: boolean;
}>>;
type LoadEnvironmentOptions = EnvironmentOptions & Partial<Readonly<{
    /**
     * Specifies the extension of the environment texture to load.
     * This must be specified when the extension cannot be determined from the url.
     */
    extension: string;
}>>;
type ViewerHotSpotQuery = ({
    /**
     * The type of the hot spot.
     */
    type: "surface";
    /**
     * The index of the mesh within the loaded model.
     */
    meshIndex: number;
} & HotSpotQuery) | {
    /**
     * The type of the hot spot.
     */
    type: "world";
    /**
     * The fixed world space position of the hot spot.
     */
    position: [x: number, y: number, z: number];
    /**
     * The fixed world space normal of the hot spot.
     */
    normal: [x: number, y: number, z: number];
};
type HotSpot = ViewerHotSpotQuery & {
    /**
     * An optional camera pose to associate with the hotspot.
     */
    cameraOrbit?: CameraOrbit;
};
/**
 * Provides the result of a hot spot query.
 */
declare class ViewerHotSpotResult {
    /**
     * 2D canvas position in pixels
     */
    readonly screenPosition: [x: number, y: number];
    /**
     * 3D world coordinates
     */
    readonly worldPosition: [x: number, y: number, z: number];
    /**
     * visibility range is [-1..1]. A value of 0 means camera eye is on the plane.
     */
    visibility: number;
}
type ViewerBoundingInfo = {
    /**
     * The minimum and maximum extents of the model.
     */
    extents: Readonly<{
        /**
         * The minimum extent of the model.
         */
        readonly min: readonly [x: number, y: number, z: number];
        /**
         * The maximum extent of the model.
         */
        readonly max: readonly [x: number, y: number, z: number];
    }>;
    /**
     * The size of the model.
     */
    readonly size: readonly [x: number, y: number, z: number];
    /**
     * The center of the model.
     */
    readonly center: readonly [x: number, y: number, z: number];
};
type ViewerCameraConfig = {
    /**
     * The goal radius of the camera.
     * @remarks This is the size of the scene bounds (times a factor)
     */
    radius: number;
    /**
     * The goal target of the camera.
     * @remarks Center of the bounds of the scene or 0,0,0 by default
     */
    target: Vector3;
    /**
     * The minimum zoom distance of the camera.
     */
    lowerRadiusLimit: number;
    /**
     * The maximum zoom distance of the camera.
     */
    upperRadiusLimit: number;
    /**
     * The minZ of the camera.
     */
    minZ: number;
    /**
     * The maxZ of the camera.
     */
    maxZ: number;
};
type Model = IDisposable & {
    /**
     * The asset container representing the model.
     */
    readonly assetContainer: AssetContainer;
    /**
     * The material variants controller for the model.
     */
    readonly materialVariantsController: Nullable<MaterialVariantsController>;
    /**
     * The current animation.
     */
    selectedAnimation: number;
    /**
     * Returns the world position and visibility of a hot spot.
     */
    getHotSpotToRef(query: Readonly<ViewerHotSpotQuery>, result: ViewerHotSpotResult): boolean;
    /**
     * Compute and return the world bounds of the model.
     * The minimum and maximum extents, the size and the center.
     * @param animationIndex The index of the animation group to use for computation. If omitted, the current selected animation is used.
     * @returns The computed bounding info for the model or null if no meshes are present in the asset container.
     */
    getWorldBounds(animationIndex?: number): Nullable<ViewerBoundingInfo>;
    /**
     * Resets the computed world bounds of the model.
     * Should be called after the model undergoes transformations.
     */
    resetWorldBounds(): void;
    /**
     * Makes the model the current active model in the viewer.
     * @param options Options for activating the model.
     */
    makeActive(options?: ActivateModelOptions): void;
};
/**
 * @experimental
 * Provides an experience for viewing a single 3D model.
 * @remarks
 * The Viewer is not tied to a specific UI framework and can be used with Babylon.js in a browser or with Babylon Native.
 */
declare class Viewer implements IDisposable {
    private readonly _engine;
    private readonly _options?;
    /**
     * When enabled, the Viewer will emit additional diagnostic logs to the console.
     */
    showDebugLogs: boolean;
    /**
     * Fired when the environment has changed.
     */
    readonly onEnvironmentChanged: Observable<void>;
    /**
     * Fired when the environment configuration has changed.
     */
    readonly onEnvironmentConfigurationChanged: Observable<void>;
    /**
     * Fired when an error occurs while loading the environment.
     */
    readonly onEnvironmentError: Observable<unknown>;
    /**
     * Fired when the shadows configuration changes.
     */
    readonly onShadowsConfigurationChanged: Observable<void>;
    /**
     * Fired when the post processing state changes.
     */
    readonly onPostProcessingChanged: Observable<void>;
    /**
     * Fired when a model is loaded into the viewer (or unloaded from the viewer).
     * @remarks
     * The event argument is the source that was loaded, or null if no model is loaded.
     */
    readonly onModelChanged: Observable<Nullable<string | File | ArrayBufferView<ArrayBufferLike>>>;
    /**
     * Fired when an error occurs while loading a model.
     */
    readonly onModelError: Observable<unknown>;
    /**
     * Fired when progress changes on loading activity.
     */
    readonly onLoadingProgressChanged: Observable<void>;
    /**
     * Fired when the camera auto orbit state changes.
     */
    readonly onCameraAutoOrbitChanged: Observable<void>;
    /**
     * Fired when the selected animation changes.
     */
    readonly onSelectedAnimationChanged: Observable<void>;
    /**
     * Fired when the animation speed changes.
     */
    readonly onAnimationSpeedChanged: Observable<void>;
    /**
     * Fired when the selected animation is playing or paused.
     */
    readonly onIsAnimationPlayingChanged: Observable<void>;
    /**
     * Fired when the current point on the selected animation timeline changes.
     */
    readonly onAnimationProgressChanged: Observable<void>;
    /**
     * Fired when the selected material variant changes.
     */
    readonly onSelectedMaterialVariantChanged: Observable<void>;
    /**
     * Fired when the hot spots object changes to a complete new object instance.
     */
    readonly onHotSpotsChanged: Observable<void>;
    /**
     * Fired when the cameras as hot spots property changes.
     */
    readonly onCamerasAsHotSpotsChanged: Observable<void>;
    protected readonly _scene: Scene;
    protected readonly _camera: ArcRotateCamera;
    protected readonly _snapshotHelper: SnapshotRenderingHelper;
    private readonly _defaultHardwareScalingLevel;
    private _lastHardwareScalingLevel;
    private _renderedLastFrame;
    private _sceneOptimizer;
    private readonly _tempVectors;
    private readonly _meshDataCache;
    private readonly _autoRotationBehavior;
    private readonly _imageProcessingConfigurationObserver;
    private readonly _beforeRenderObserver;
    private _renderLoopController;
    private _loadedModelsBacking;
    private _activeModelBacking;
    private _environmentSkyboxMode;
    private _environmentLightingMode;
    private _skybox;
    private _skyboxBlur;
    private _skyboxTexture;
    private _reflectionTexture;
    private _reflectionsIntensity;
    private _reflectionsRotation;
    private _light;
    private _toneMappingEnabled;
    private _toneMappingType;
    private _contrast;
    private _exposure;
    private _ssaoOption;
    private _ssaoPipeline;
    private readonly _autoSuspendRendering;
    private _sceneMutated;
    private _suspendRenderCount;
    private _isDisposed;
    private readonly _loadModelLock;
    private _loadModelAbortController;
    private readonly _loadEnvironmentLock;
    private _loadEnvironmentAbortController;
    private _camerasAsHotSpotsAbortController;
    private readonly _updateShadowsLock;
    private _shadowsAbortController;
    private readonly _loadOperations;
    private _activeAnimationObservers;
    private _animationSpeed;
    private _camerasAsHotSpots;
    private _hotSpots;
    private _shadowQuality;
    private readonly _shadowState;
    constructor(_engine: AbstractEngine, _options?: Readonly<ViewerOptions> | undefined);
    /**
     * The camera auto orbit configuration.
     */
    get cameraAutoOrbit(): Readonly<CameraAutoOrbit>;
    set cameraAutoOrbit(value: Partial<Readonly<CameraAutoOrbit>>);
    /**
     * Get the current environment configuration.
     */
    get environmentConfig(): Readonly<EnvironmentParams>;
    set environmentConfig(value: Partial<Readonly<EnvironmentParams>>);
    /**
     * Get the current shadow configuration.
     */
    get shadowConfig(): Readonly<ShadowParams>;
    /**
     * Update the shadow configuration.
     * @param value The new shadow configuration.
     */
    updateShadows(value: Partial<Readonly<ShadowParams>>): Promise<void>;
    private _changeSkyboxBlur;
    /**
     * Change the environment rotation.
     * @param value the rotation in radians
     */
    private _changeEnvironmentRotation;
    private _changeEnvironmentIntensity;
    private _updateAutoClear;
    /**
     * The post processing configuration.
     */
    get postProcessing(): PostProcessing;
    set postProcessing(value: Partial<Readonly<PostProcessing>>);
    /**
     * Gets information about loading activity.
     * @remarks
     * false indicates no loading activity.
     * true indicates loading activity with no progress information.
     * A number between 0 and 1 indicates loading activity with progress information.
     */
    get loadingProgress(): boolean | number;
    protected get _loadedModels(): readonly Model[];
    protected get _activeModel(): Nullable<Model>;
    private _setActiveModel;
    private _enableSSAOPipeline;
    private _disableSSAOPipeline;
    protected _updateSSAOPipeline(): void;
    /**
     * The list of animation names for the currently loaded model.
     */
    get animations(): readonly string[];
    /**
     * The currently selected animation index.
     */
    get selectedAnimation(): number;
    set selectedAnimation(value: number);
    protected _selectAnimation(index: number, interpolateCamera?: boolean): void;
    /**
     * True if an animation is currently playing.
     */
    get isAnimationPlaying(): boolean;
    /**
     * The speed scale at which animations are played.
     */
    get animationSpeed(): number;
    set animationSpeed(value: number);
    /**
     * The current point on the selected animation timeline, normalized between 0 and 1.
     */
    get animationProgress(): number;
    set animationProgress(value: number);
    private get _activeAnimation();
    /**
     * The list of material variant names for the currently loaded model.
     */
    get materialVariants(): readonly string[];
    /**
     * The currently selected material variant.
     */
    get selectedMaterialVariant(): Nullable<string>;
    set selectedMaterialVariant(value: Nullable<string>);
    /**
     * The set of defined hotspots.
     */
    get hotSpots(): Record<string, HotSpot>;
    set hotSpots(value: Record<string, HotSpot>);
    /**
     * True if scene cameras should be used as hotspots.
     */
    get camerasAsHotSpots(): boolean;
    set camerasAsHotSpots(value: boolean);
    protected _beginLoadOperation(): IDisposable & {
        progress: Nullable<number>;
    };
    /**
     * Loads a 3D model from the specified URL.
     * @remarks
     * If a model is already loaded, it will be unloaded before loading the new model.
     * @param source A url or File or ArrayBufferView that points to the model to load.
     * @param options The options to use when loading the model.
     * @param abortSignal An optional signal that can be used to abort the loading process.
     */
    loadModel(source: string | File | ArrayBufferView, options?: LoadModelOptions, abortSignal?: AbortSignal): Promise<void>;
    /**
     * Unloads the current 3D model if one is loaded.
     * @param abortSignal An optional signal that can be used to abort the reset.
     */
    resetModel(abortSignal?: AbortSignal): Promise<void>;
    protected _loadModel(source: string | File | ArrayBufferView, options?: LoadAssetContainerOptions, abortSignal?: AbortSignal): Promise<Model>;
    private _updateModel;
    protected _updateShadows(): Promise<void>;
    private _changeShadowLightIntensity;
    private _rotateShadowLightWithEnvironment;
    private _startIblShadowsRenderTime;
    private _updateEnvShadow;
    /**
     * Finds the light direction the environment (IBL).
     * If the environment changes, it will explicitly trigger the generation of CDF maps.
     * @param iblCdfGenerator The IblCdfGenerator to use for finding the dominant direction.
     * @returns A promise that resolves to the dominant direction vector.
     */
    private _findIblDominantDirection;
    private _updateShadowMap;
    private _disposeShadows;
    /**
     * Loads an environment texture from the specified url and sets up a corresponding skybox.
     * @remarks
     * If an environment is already loaded, it will be unloaded before loading the new environment.
     * @param url The url of the environment texture to load.
     * @param options The options to use when loading the environment.
     * @param abortSignal An optional signal that can be used to abort the loading process.
     */
    loadEnvironment(url: string, options?: LoadEnvironmentOptions, abortSignal?: AbortSignal): Promise<void>;
    /**
     * Resets the environment to its default state.
     * @param options The options to use when resetting the environment.
     * @param abortSignal An optional signal that can be used to abort the reset.
     */
    resetEnvironment(options?: EnvironmentOptions, abortSignal?: AbortSignal): Promise<void>;
    private _setEnvironmentLighting;
    private _setEnvironmentSkybox;
    private _updateEnvironment;
    /**
     * Toggles the play/pause animation state if there is a selected animation.
     */
    toggleAnimation(): void;
    /**
     * Plays the selected animation if there is one.
     */
    playAnimation(): void;
    /**
     * Pauses the selected animation if there is one.
     */
    pauseAnimation(): Promise<void>;
    /**
     * Resets the camera to its initial pose.
     * @param reframe If true, the camera will be reframed to fit the model bounds. If false, it will use the default camera pose passed in with the options to the constructor (if present).
     *                If undefined, default to false if other viewer state matches the default state (such as the selected animation), otherwise true.
     */
    resetCamera(reframe?: boolean): void;
    /**
     * Updates the camera pose.
     * @param pose The new pose of the camera.
     * @remarks Any unspecified values are left unchanged.
     */
    updateCamera(pose: {
        alpha?: number;
        beta?: number;
        radius?: number;
        targetX?: number;
        targetY?: number;
        targetZ?: number;
    }): void;
    /**
     * Resets the viewer to its initial state based on the options passed in to the constructor.
     * @param flags The flags that specify which parts of the viewer to reset. If no flags are provided, all parts will be reset.
     * - "source": Reset the loaded model.
     * - "environment": Reset environment related state.
     * - "animation": Reset animation related state.
     * - "camera": Reset camera related state.
     * - "post-processing": Reset post-processing related state.
     * - "material-variant": Reset material variant related state.
     */
    reset(...flags: ResetFlag[]): void;
    private _reset;
    /**
     * Disposes of the resources held by the Viewer.
     */
    dispose(): void;
    /**
     * Return world and canvas coordinates of an hot spot
     * @param query mesh index and surface information to query the hot spot positions
     * @param result Query a Hot Spot and does the conversion for Babylon Hot spot to a more generic HotSpotPositions, without Vector types
     * @returns true if hotspot found
     */
    getHotSpotToRef(query: Readonly<ViewerHotSpotQuery>, result: ViewerHotSpotResult): boolean;
    protected _getHotSpotToRef(assetContainer: Nullable<AssetContainer>, query: Readonly<ViewerHotSpotQuery>, result: ViewerHotSpotResult): boolean;
    /**
     * Get hotspot world and screen values from a named hotspot
     * @param name slot of the hot spot
     * @param result resulting world and screen positions
     * @returns world position, world normal and screen space coordinates
     */
    queryHotSpot(name: string, result: ViewerHotSpotResult): boolean;
    /**
     * Updates the camera to focus on a named hotspot.
     * @param name The name of the hotspot to focus on.
     * @returns true if the hotspot was found and the camera was updated, false otherwise.
     */
    focusHotSpot(name: string): boolean;
    private _queryHotSpot;
    private _addCameraHotSpot;
    private _removeCameraHotSpot;
    private _toggleCamerasAsHotSpots;
    /**
     * Creates a world HotSpot from a camera.
     * @param camera The camera to create a HotSpot from.
     * @returns A HotSpot created from the camera.
     */
    private _createHotSpotFromCamera;
    protected get _shouldRender(): boolean;
    protected _markSceneMutated(): void;
    protected _suspendRendering(): IDisposable;
    private _beginRendering;
    protected _reframeCamera(interpolate?: boolean, models?: readonly Model[]): void;
    protected _getWorldBounds(models: readonly Model[]): Nullable<ViewerBoundingInfo>;
    protected _getCameraConfig(models: readonly Model[]): ViewerCameraConfig;
    private _reframeCameraFromBounds;
    protected _updateLight(): void;
    private _applyAnimationSpeed;
    protected _pick(screenX: number, screenY: number): Promise<Nullable<PickingInfo>>;
    protected _startSceneOptimizer(reset?: boolean): void;
    protected _stopSceneOptimizer(): void;
    protected _log(message: string): void;
    /**
     * Check for disposed or aborted state (basically everything that can interrupt an async operation).
     * @param abortSignals A set of optional AbortSignals to also check.
     */
    private _throwIfDisposedOrAborted;
}

/**
 * Options for creating a Viewer instance that is bound to an HTML canvas.
 */
type CanvasViewerOptions = ViewerOptions & {
    onFaulted?: (error: Error) => void;
} & (({
    engine?: undefined;
} & AbstractEngineOptions) | ({
    engine: "WebGL";
} & EngineOptions) | ({
    engine: "WebGPU";
} & WebGPUEngineOptions));
/**
 * @experimental
 * Creates a Viewer instance that is bound to an HTML canvas.
 * @remarks
 * This function can be shared across multiple UI integrations (e.g. Web Components, React, etc.).
 * @param canvas The canvas element to bind the Viewer to.
 * @param options The options to use when creating the Viewer and binding it to the specified canvas.
 * @returns A Viewer instance that is bound to the specified canvas.
 */
declare function CreateViewerForCanvas<DerivedViewer extends Viewer>(canvas: HTMLCanvasElement, options: Readonly<CanvasViewerOptions & {
    /**
     * The Viewer subclass to use when creating the Viewer instance.
     */
    viewerClass: new (...args: ConstructorParameters<typeof Viewer>) => DerivedViewer;
}>): Promise<DerivedViewer>;
declare function CreateViewerForCanvas(canvas: HTMLCanvasElement, options?: CanvasViewerOptions): Promise<Viewer>;

type ResetMode = "auto" | "reframe" | [ResetFlag, ...flags: ResetFlag[]];
interface ViewerElementEventMap extends HTMLElementEventMap {
    viewerready: Event;
    viewerrender: Event;
    environmentchange: Event;
    environmentconfigurationchange: Event;
    environmenterror: ErrorEvent;
    shadowsconfigurationchange: Event;
    modelchange: CustomEvent<Nullable<string | File | ArrayBufferView>>;
    modelerror: ErrorEvent;
    loadingprogresschange: Event;
    selectedanimationchange: Event;
    animationspeedchange: Event;
    animationplayingchange: Event;
    animationprogresschange: Event;
    selectedmaterialvariantchange: Event;
}
interface ViewerElement {
    addEventListener<K extends keyof ViewerElementEventMap>(type: K, listener: (this: HTMLElement, ev: ViewerElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
    addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
    removeEventListener<K extends keyof ViewerElementEventMap>(type: K, listener: (this: HTMLElement, ev: ViewerElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
    removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
}
/**
 * @experimental
 * Base class for the viewer custom element.
 */
declare abstract class ViewerElement<ViewerClass extends Viewer = Viewer> extends LitElement {
    private readonly _viewerClass;
    private readonly _options;
    private readonly _viewerLock;
    private _animationSliderResizeObserver;
    private _viewerDetails?;
    /**
     * @experimental
     * Creates an instance of a ViewerElement subclass.
     * @param _viewerClass The Viewer subclass to use when creating the Viewer instance.
     * @param _options The options to use when creating the Viewer and binding it to the specified canvas.
     */
    protected constructor(_viewerClass: new (...args: ConstructorParameters<typeof Viewer>) => ViewerClass, _options?: CanvasViewerOptions);
    private readonly _propertyBindings;
    /** @internal */
    static get observedAttributes(): string[];
    /** @internal */
    static styles: CSSResultGroup;
    /**
     * Gets the underlying viewer details (when the underlying viewer is in a loaded state).
     * This is useful for advanced scenarios where direct access to the viewer or Babylon scene is needed.
     */
    get viewerDetails(): Readonly<ViewerDetails & {
        viewer: ViewerClass;
    }> | undefined;
    /**
     * Get hotspot world and screen values from a named hotspot
     * @param name slot of the hot spot
     * @param result resulting world and screen positions
     * @returns world position, world normal and screen space coordinates
     */
    queryHotSpot(name: string, result: ViewerHotSpotResult): boolean;
    /**
     * Updates the camera to focus on a named hotspot.
     * @param name The name of the hotspot to focus on.
     * @returns true if the hotspot was found and the camera was updated, false otherwise.
     */
    focusHotSpot(name: string): boolean;
    private _isFaultedBacking;
    protected get _isFaulted(): boolean;
    /**
     * The engine to use for rendering.
     */
    engine: CanvasViewerOptions["engine"];
    /**
     * When true, the scene will be rendered even if no scene state has changed.
     */
    renderWhenIdle: boolean;
    /**
     * The model URL.
     */
    source: Nullable<string>;
    /**
     * Forces the model to be loaded with the specified extension.
     * @remarks
     * If this property is not set, the extension will be inferred from the model URL when possible.
     */
    extension: Nullable<string>;
    /**
     * The texture URLs used for lighting and skybox. Setting this property will set both environmentLighting and environmentSkybox.
     */
    get environment(): {
        lighting: Nullable<string>;
        skybox: Nullable<string>;
    };
    set environment(url: string);
    /**
     * The texture URL for lighting.
     */
    environmentLighting: Nullable<string>;
    /**
     * The texture URL for the skybox.
     */
    environmentSkybox: Nullable<string>;
    /**
     * A value between 0 and 2 that specifies the intensity of the environment lighting.
     */
    environmentIntensity: Nullable<number>;
    /**
     * A value in radians that specifies the rotation of the environment.
     */
    environmentRotation: Nullable<number>;
    /**
     * The type of shadows to use.
     */
    shadowQuality: Nullable<ShadowQuality>;
    private _loadingProgress;
    /**
     * Gets information about loading activity.
     * @remarks
     * false indicates no loading activity.
     * true indicates loading activity with no progress information.
     * A number between 0 and 1 indicates loading activity with progress information.
     */
    get loadingProgress(): boolean | number;
    /**
     * A value between 0 and 1 that specifies how much to blur the skybox.
     */
    skyboxBlur: Nullable<number>;
    /**
     * The tone mapping to use for rendering the scene.
     */
    toneMapping: Nullable<ToneMapping>;
    /**
     * The contrast applied to the scene.
     */
    contrast: Nullable<number>;
    /**
     * The exposure applied to the scene.
     */
    exposure: Nullable<number>;
    /**
     * Enables or disables screen space ambient occlusion (SSAO).
     */
    ssao: Nullable<SSAOOptions>;
    /**
     * The clear color (e.g. background color) for the viewer.
     */
    clearColor: Nullable<Color4>;
    /**
     * Enables or disables camera auto-orbit.
     */
    cameraAutoOrbit: boolean;
    /**
     * The speed at which the camera auto-orbits around the target.
     */
    cameraAutoOrbitSpeed: Nullable<number>;
    /**
     * The delay in milliseconds before the camera starts auto-orbiting.
     */
    cameraAutoOrbitDelay: Nullable<number>;
    /**
     * The set of defined hot spots.
     */
    hotSpots: Record<string, HotSpot>;
    /**
     * @experimental
     * True if the viewer has any hotspots.
     */
    protected get _hasHotSpots(): boolean;
    /**
     * True if the default animation should play automatically when a model is loaded.
     */
    animationAutoPlay: boolean;
    /**
     * The list of animation names for the currently loaded model.
     */
    get animations(): readonly string[];
    /**
     * @experimental
     * True if the loaded model has any animations.
     */
    protected get _hasAnimations(): boolean;
    /**
     * The currently selected animation index.
     */
    selectedAnimation: Nullable<number>;
    /**
     * True if an animation is currently playing.
     */
    get isAnimationPlaying(): boolean;
    /**
     * The speed scale at which animations are played.
     */
    animationSpeed: number;
    /**
     * The current point on the selected animation timeline, normalized between 0 and 1.
     */
    animationProgress: number;
    private _animations;
    private _isAnimationPlaying;
    private _showAnimationSlider;
    /**
     * The list of material variants for the currently loaded model.
     */
    get materialVariants(): readonly string[];
    /**
     * The currently selected material variant.
     */
    selectedMaterialVariant: Nullable<string>;
    /**
     * True if scene cameras should be used as hotspots.
     */
    camerasAsHotSpots: boolean;
    /**
     * Determines the behavior of the reset function, and the associated default reset button.
     * @remarks
     * - "auto" - Resets the camera to the initial pose if it makes sense given other viewer state, such as the selected animation.
     * - "reframe" - Reframes the camera based on the current viewer state (ignores the initial pose).
     * - [ResetFlag] - A space separated list of reset flags that reset various aspects of the viewer state.
     */
    resetMode: ResetMode;
    private _canvasContainer;
    private _hotSpotSelect;
    /**
     * Toggles the play/pause animation state if there is a selected animation.
     */
    toggleAnimation(): void;
    /**
     * Resets the Viewer state based on the @see resetMode property.
     */
    reset(): void;
    private _reset;
    /**
     * Resets the camera to its initial pose.
     */
    resetCamera(): void;
    /**
     * Reloads the viewer. This is typically only needed when the viewer is in a faulted state (e.g. due to the context being lost).
     */
    reload(): void;
    /** @internal */
    connectedCallback(): void;
    /** @internal */
    disconnectedCallback(): void;
    /** @internal */
    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
    /** @internal */
    protected update(changedProperties: PropertyValues<this>): void;
    /** @internal */
    protected render(): TemplateResult<1>;
    /**
     * @experimental
     * Renders the progress bar.
     * @returns The template result for the progress bar.
     */
    protected _renderProgressBar(): TemplateResult;
    /**
     * @experimental
     * Renders the toolbar.
     * @returns The template result for the toolbar.
     */
    protected _renderToolbar(): TemplateResult;
    /**
     * @experimental
     * Renders the reload button.
     * @returns The template result for the reload button.
     */
    protected _renderReloadButton(): TemplateResult;
    /**
     * @experimental
     * Renders UI elements that overlay the viewer.
     * Override this method to provide additional rendering for the component.
     * @returns TemplateResult The rendered template result.
     */
    protected _renderOverlay(): TemplateResult;
    /**
     * @experimental
     * Dispatches a custom event.
     * @param type The type of the event.
     * @param event A function that creates the event.
     */
    protected _dispatchCustomEvent<TEvent extends keyof ViewerElementEventMap>(type: TEvent, event: (type: TEvent) => ViewerElementEventMap[TEvent]): void;
    /**
     * @experimental
     * Handles changes to the selected animation.
     * @param event The change event.
     */
    protected _onSelectedAnimationChanged(event: Event): void;
    /**
     * @experimental
     * Handles changes to the animation speed.
     * @param event The change event.
     */
    protected _onAnimationSpeedChanged(event: Event): void;
    /**
     * @experimental
     * Handles changes to the animation timeline.
     * @param event The change event.
     */
    protected _onAnimationTimelineChanged(event: Event): void;
    /**
     * @experimental
     * Handles pointer down events on the animation timeline.
     * @param event The pointer down event.
     */
    protected _onAnimationTimelinePointerDown(event: Event): void;
    /**
     * @experimental
     * Handles changes to the selected material variant.
     * @param event The change event.
     */
    protected _onMaterialVariantChanged(event: Event): void;
    /**
     * @experimental
     * Handles changes to the hot spot list.
     * @param event The change event.
     */
    protected _onHotSpotsChanged(event: Event): void;
    private _onAnimationSliderChanged;
    private _createPropertyBinding;
    private _setupViewer;
    /**
     * @experimental
     * Creates a viewer for the specified canvas.
     * @param canvas The canvas to create the viewer for.
     * @param options The options to use for the viewer.
     * @returns The created viewer.
     */
    protected _createViewer(canvas: HTMLCanvasElement, options: CanvasViewerOptions): Promise<ViewerClass>;
    private _tearDownViewer;
    private _updateModel;
    private _updateEnv;
    private _updateShadows;
}
/**
 * Displays a 3D model using the Babylon.js Viewer.
 */
declare class HTML3DElement extends ViewerElement {
    /**
     * Creates a new HTML3DElement.
     * @param options The options to use for the viewer. This is optional, and is only used when programmatically creating a viewer element.
     */
    constructor(options?: Readonly<CanvasViewerOptions>);
}
/**
 * Creates a custom HTML element that creates an HTML3DElement with the specified name and configuration.
 * @param elementName The name of the custom element.
 * @param options The options to use for the viewer.
 */
declare function ConfigureCustomViewerElement(elementName: string, options: Readonly<CanvasViewerOptions>): void;

/**
 * Displays child elements at the screen space location of a hotspot in a babylon-viewer.
 * @remarks
 * The babylon-viewer-annotation element must be a child of a babylon-viewer element.
 */
declare class HTML3DAnnotationElement extends LitElement {
    /** @internal */
    static styles: lit.CSSResult;
    private readonly _internals;
    private readonly _mutationObserver;
    private _viewerAttachment;
    private _connectingAbortController;
    private _updateAnnotation;
    /**
     * The name of the hotspot to track.
     */
    hotSpot: string;
    /** @internal */
    connectedCallback(): void;
    /** @internal */
    disconnectedCallback(): void;
    /** @internal */
    protected render(): lit_html.TemplateResult<1>;
    /** @internal */
    protected update(changedProperties: PropertyValues<this>): void;
    private _sanitizeInnerHTML;
}

export { ConfigureCustomViewerElement, CreateHotSpotFromCamera, CreateViewerForCanvas, DefaultViewerOptions, HTML3DAnnotationElement, HTML3DElement, Viewer, ViewerElement, ViewerHotSpotResult };
export type { CameraAutoOrbit, CanvasViewerOptions, EnvironmentOptions, HotSpot, LoadModelOptions, Model, PostProcessing, ShadowQuality, ToneMapping, ViewerDetails, ViewerElementEventMap, ViewerHotSpotQuery, ViewerOptions };