babylonjs-addons 8.23.2 → 8.24.1

package/babylonjs.addons.module.d.ts

@@ -435,1313 +435,307 @@ export type BMFont = {
 };
 
 }
-declare module "babylonjs-addons/lottie/worker" {
-export {};
-
-}
-declare module "babylonjs-addons/lottie/lottiePlayer" {
+declare module "babylonjs-addons/htmlMesh/pointerEventsCaptureBehavior" {
+import { AbstractMesh } from "babylonjs/Meshes/abstractMesh";
+import { Behavior } from "babylonjs/Behaviors/behavior";
 /**
- * Configuration options for the Lottie animation player.
+ * Behavior for any content that can capture pointer events, i.e. bypass the Babylon pointer event handling
+ * and receive pointer events directly.  It will register the capture triggers and negotiate the capture and
+ * release of pointer events.  Curerntly this applies only to HtmlMesh
  */
-export type AnimationConfiguration = {
-    /**
-     * Whether the animation should play on a loop or not
-     */
-    loopAnimation: boolean;
-    /**
-     * Size of the sprite atlas texture.
-     * Default is 2048.
-     */
-    spriteAtlasSize: number;
-    /**
-     * Gap size around sprites in the atlas.
-     * Default is 5.
-     */
-    gapSize: number;
-    /**
-     * Maximum number of sprites the renderer can handle at once.
-     * Default is 64.
-     */
-    spritesCapacity: number;
-    /**
-     * Background color for the animation canvas.
-     * Default is white with full opacity.
-     */
-    backgroundColor: {
-        r: number;
-        g: number;
-        b: number;
-        a: number;
-    };
-    /**
-     * Minimum scale factor to prevent too small sprites.
-     * Default is 5.
-     */
-    scaleMultiplier: number;
-    /**
-     * Scale factor for the rendering.
-     * Default is 1.
-     */
-    devicePixelRatio: number;
+export class PointerEventsCaptureBehavior implements Behavior<AbstractMesh> {
+    private _captureCallback;
+    private _releaseCallback;
+    /** gets or sets behavior's name */
+    name: string;
+    private _attachedMesh;
+    /** @internal */
+    _captureOnPointerEnter: boolean;
     /**
-     * Number of steps to sample cubic bezier easing functions for animations.
-     * Default is 4.
+     * Gets or sets the mesh that the behavior is attached to
      */
-    easingSteps: number;
+    get attachedMesh(): AbstractMesh | null;
+    set attachedMesh(value: AbstractMesh | null);
+    constructor(_captureCallback: () => void, _releaseCallback: () => void, { captureOnPointerEnter }?: {
+        captureOnPointerEnter?: boolean | undefined;
+    });
     /**
-     * Whether to ignore opacity animations for performance.
-     * Default is true.
+     * Set if the behavior should capture pointer events when the pointer enters the mesh
      */
-    ignoreOpacityAnimations: boolean;
+    set captureOnPointerEnter(captureOnPointerEnter: boolean);
     /**
-     * Whether to support device lost events for WebGL contexts.
-     * Default is false.
+     * Function called when the behavior needs to be initialized (before attaching it to a target)
      */
-    supportDeviceLost: boolean;
-};
-/**
- * LottiePlayer is a class that allows you to play Lottie animations using Babylon.js.
- * It plays the animations in a worker thread using OffscreenCanvas.
- * Once instance of this class can only be used to play a single animation. If you want to play multiple animations, create a new instance for each animation.
- */
-export class LottiePlayer {
-    private _playing;
-    private _disposed;
-    private _worker;
-    private _canvas;
-    private _resizeObserver;
-    private readonly _container;
-    private readonly _animationFile;
-    private readonly _configuration;
+    init(): void;
     /**
-     * Creates a new instance of the LottiePlayer.
-     * @param container The HTMLDivElement to create the canvas in and render the animation on.
-     * @param animationFile The URL of the Lottie animation file to be played.
-     * @param configuration Optional configuration object to customize the animation playback.
+     * Called when the behavior is attached to a target
+     * @param mesh defines the target where the behavior is attached to
      */
-    constructor(container: HTMLDivElement, animationFile: string, configuration?: Partial<AnimationConfiguration>);
+    attach(mesh: AbstractMesh): void;
     /**
-     * Loads and plays a lottie animation.
-     * @returns True if the animation is successfully set up to play, false if the animation couldn't play.
+     * Called when the behavior is detached from its target
      */
-    playAnimation(): boolean;
+    detach(): void;
     /**
-     * Disposes the LottiePlayer instance, cleaning up resources and event listeners.
+     * Dispose the behavior
      */
     dispose(): void;
-    private _onWindowResize;
-    private _onBeforeUnload;
-}
-
+    releasePointerEvents(): void;
+    capturePointerEvents(): void;
 }
-declare module "babylonjs-addons/lottie/index" {
-export { LottiePlayer, AnimationConfiguration } from "babylonjs-addons/lottie/lottiePlayer";
 
 }
-declare module "babylonjs-addons/lottie/sprites/spritePacker" {
-import "babylonjs/Engines/Extensions/engine.dynamicTexture";
-import { ThinEngine } from "babylonjs/Engines/thinEngine";
-import { IVector2Like } from "babylonjs/Maths/math.like";
-import { ThinTexture } from "babylonjs/Materials/Textures/thinTexture";
-import { RawGroupShape } from "babylonjs-addons/lottie/lottie/rawTypes";
-import { AnimationConfiguration } from "babylonjs-addons/lottie/lottiePlayer";
+declare module "babylonjs-addons/htmlMesh/pointerEventsCapture" {
+type CaptureReleaseCallback = () => void;
 /**
- * Information about a sprite in the sprite atlas.
+ * Get the id of the object currently capturing pointer events
+ * @returns The id of the object currently capturing pointer events
+ * or null if no object is capturing pointer events
  */
-export type SpriteAtlasInfo = {
-    /**
-     * Offset in the x axis of the sprite in the atlas.
-     * Normalized between 0 and 1, left to right.
-     */
-    uOffset: number;
-    /**
-     * Offset in the y axis of the sprite in the atlas.
-     * Normalized between 0 and 1, top to bottom.
-     */
-    vOffset: number;
-    /**
-     * Width of the sprite in the atlas.
-     * In pixels.
-     */
-    cellWidth: number;
-    /**
-     * Height of the sprite in the atlas.
-     * In pixels.
-     */
-    cellHeight: number;
-    /**
-     * Width of the sprite in the screen.
-     * In pixels.
-     */
-    widthPx: number;
-    /**
-     * Height of the sprite in the screen.
-     * In pixels.
-     */
-    heightPx: number;
-    /**
-     * X coordinate of the center of the sprite bounding box, used for final positioning in the screen
-     */
-    centerX: number;
-    /**
-     * Y coordinate of the center of the sprite bounding box, used for final positioning in the screen
-     */
-    centerY: number;
-};
+export const getCapturingId: () => string | null;
 /**
- * SpritePacker is a class that handles the packing of sprites into a texture atlas.
+ * Request that the object with the given id capture pointer events.  If there is no current
+ * owner, then the request is granted immediately.  If there is a current owner, then the request
+ * is queued until the current owner releases pointer events.
+ * @param requestId An id to identify the request.  This id will be used to match the capture
+ * request with the release request.
+ * @param captureCallback The callback to call when the request is granted and the object is capturing
+ * @param releaseCallback The callback to call when the object is no longer capturing pointer events
  */
-export class SpritePacker {
-    private readonly _engine;
-    private readonly _configuration;
-    private _spritesCanvas;
-    private _spritesCanvasContext;
-    private readonly _spritesInternalTexture;
-    private readonly _spritesTexture;
-    private _isDirty;
-    private _currentX;
-    private _currentY;
-    private _maxRowHeight;
-    private _spriteAtlasInfo;
-    /**
-     * Gets the texture atlas that contains all the sprites packed by this SpritePacker.
-     * @returns The texture atlas containing the sprites.
-     */
-    get texture(): ThinTexture;
-    /**
-     * Creates a new instance of SpritePacker.
-     * @param engine Engine that will render the sprites.
-     * @param configuration Configuration options for the sprite packer.
-     */
-    constructor(engine: ThinEngine, configuration: AnimationConfiguration);
-    /**
-     * Adds a vector shape that comes from lottie data to the sprite atlas.
-     * @param rawGroup The raw group shape to add to the atlas.
-     * @param scalingFactor The scaling factor to apply to the shape.
-     * @returns The information on how to find the sprite in the atlas.
-     */
-    addLottieShape(rawGroup: RawGroupShape, scalingFactor: IVector2Like): SpriteAtlasInfo;
-    /**
-     * Updates the internal atlas texture with the information that has been added to the SpritePacker.
-     */
-    updateAtlasTexture(): void;
-    /**
-     * Releases the canvas and its context to allow garbage collection.
-     */
-    releaseCanvas(): void;
-    private _drawVectorShape;
-    private _drawRectangle;
-    private _drawPath;
-    private _drawFill;
-    private _drawGradientFill;
-    private _drawLinearGradientFill;
-    private _drawRadialGradientFill;
-    private _addColorStops;
-    private _gradientColorsToCssColor;
-    private _lottieColorToCSSColor;
-}
-
-}
-declare module "babylonjs-addons/lottie/sprites/spriteNode" {
-import { ThinSprite } from "babylonjs/Sprites/thinSprite";
-import { ScalarProperty, Vector2Property } from "babylonjs-addons/lottie/lottie/parsedTypes";
-import { Node } from "babylonjs-addons/lottie/rendering/node";
+export const requestCapture: (requestId: string, captureCallback: CaptureReleaseCallback, releaseCallback: CaptureReleaseCallback) => void;
 /**
- * Represents a sprite in the scene graph.
+ * Release pointer events from the object with the given id.  If the object is the current owner
+ * then pointer events are released immediately.  If the object is not the current owner, then the
+ * associated capture request is removed from the queue.  If there is no matching capture request
+ * in the queue, then the release request is added to a list of unmatched release requests and will
+ * negate the next capture request with the same id.  This is to guard against the possibility that
+ * the release request arrived before the capture request.
+ * @param requestId The id which should match the id of the capture request
  */
-export class SpriteNode extends Node {
-    private _sprite;
-    private _originalWidth;
-    private _originalHeight;
-    private _firstTime;
-    /**
-     * Creates a new SpriteNode instance.
-     * @param id Unique identifier for the sprite node.
-     * @param ignoreOpacityAnimations If there are no animations on opacity, mark this as true to ignore and optimize CPU usage.
-     * @param sprite The sprite associated with this node.
-     * @param position The position of the sprite in the scene.
-     * @param rotation The rotation of the sprite in degrees.
-     * @param scale The scale of the sprite in the scene.
-     * @param opacity The opacity of the sprite.
-     * @param parent The parent node in the scene graph.
-     */
-    constructor(id: string, ignoreOpacityAnimations: boolean, sprite: ThinSprite, position?: Vector2Property, rotation?: ScalarProperty, scale?: Vector2Property, opacity?: ScalarProperty, parent?: Node);
-    /**
-     * Updates the node's properties based on the current frame of the animation.
-     * @param frame Frame number we are playing in the animation.
-     * @param isParentUpdated Whether the parent node has been updated.
-     * @param isReset Whether the node is being reset.
-     * @returns True if the node was updated, false otherwise.
-     */
-    update(frame: number, isParentUpdated?: boolean, isReset?: boolean): boolean;
+export const requestRelease: (requestId: string | null) => void;
+/**
+ * Release pointer events from the current owner
+ */
+export const releaseCurrent: () => void;
+global {
+    interface Window {
+        "pointer-events-capture-debug": boolean | null;
+    }
 }
+export {};
+
+}
+declare module "babylonjs-addons/htmlMesh/index" {
+import { HtmlMeshRenderer } from "babylonjs-addons/htmlMesh/htmlMeshRenderer";
+import { HtmlMesh } from "babylonjs-addons/htmlMesh/htmlMesh";
+import { PointerEventsCaptureBehavior } from "babylonjs-addons/htmlMesh/pointerEventsCaptureBehavior";
+import { FitStrategy } from "babylonjs-addons/htmlMesh/fitStrategy";
+export { HtmlMeshRenderer, HtmlMesh, PointerEventsCaptureBehavior, FitStrategy };
 
 }
-declare module "babylonjs-addons/lottie/rendering/renderingManager" {
-import "babylonjs/Engines/Extensions/engine.dynamicBuffer";
-import "babylonjs/Shaders/sprites.vertex";
-import "babylonjs/Shaders/sprites.fragment";
-import { ThinEngine } from "babylonjs/Engines/thinEngine";
-import { ThinTexture } from "babylonjs/Materials/Textures/thinTexture";
-import { ThinSprite } from "babylonjs/Sprites/thinSprite";
-import { ThinMatrix } from "babylonjs-addons/lottie/maths/matrix";
-import { AnimationConfiguration } from "babylonjs-addons/lottie/lottiePlayer";
+declare module "babylonjs-addons/htmlMesh/htmlMeshRenderer" {
+import { Scene } from "babylonjs/scene";
+import { Matrix } from "babylonjs/Maths/math";
+import { HtmlMesh } from "babylonjs-addons/htmlMesh/htmlMesh";
+import { Camera } from "babylonjs/Cameras/camera";
+import { SubMesh } from "babylonjs/Meshes/subMesh";
 /**
- * Represents all the sprites from the animation and manages their rendering.
+ * A function that compares two submeshes and returns a number indicating which
+ * should be rendered first.
  */
-export class RenderingManager {
-    private readonly _engine;
-    private readonly _spritesRenderer;
-    private readonly _spritesTexture;
-    private _sprites;
-    private readonly _configuration;
-    /**
-     * Creates a new instance of the RenderingManager.
-     * @param engine ThinEngine instance used for rendering.
-     * @param spriteTexture The texture atlas containing the sprites.
-     * @param configuration Configuration options for the rendering manager.
-     */
-    constructor(engine: ThinEngine, spriteTexture: ThinTexture, configuration: AnimationConfiguration);
-    /**
-     * Adds a sprite to the rendering manager.
-     * @param sprite Sprite to add to the rendering manager.
-     */
-    addSprite(sprite: ThinSprite): void;
+type RenderOrderFunction = (subMeshA: SubMesh, subMeshB: SubMesh) => number;
+/**
+ * An instance of this is required to render HtmlMeshes in the scene.
+ * if using HtmlMeshes, you must not set render order for group 0 using
+ * scene.setRenderingOrder.  You must instead pass the compare functions
+ * to the HtmlMeshRenderer constructor.  If you do not, then your render
+ * order will be overwritten if the HtmlMeshRenderer is created after and
+ * the HtmlMeshes will not render correctly (they will appear in front of
+ * meshes that are actually in front of them) if the HtmlMeshRenderer is
+ * created before.
+ */
+export class HtmlMeshRenderer {
     /**
-     * Prepares the rendering manager for rendering.
+     * Global scale factor applied to the homogeneous `w` component (m[15]) of the
+     * transformation matrix when projecting 3D objects into pixel space.
+     *
+     * This value is used to balance Babylon units against screen pixels, ensuring
+     * that HTML-mapped or screen-space objects appear with the correct relative
+     * size. Adjust with care, as changing it affects the projection scale of all
+     * transformed objects.
+     *
+     *  The default value is `0.00001`, which works well when 1 Babylon unit
+     *  corresponds to 1 meter, and the typical screen resolution is around
+     * 100 pixels per meter (i.e., 1 pixel per centimeter).
      */
-    ready(): void;
+    static PROJECTION_SCALE_FACTOR: number;
+    private _containerId?;
+    private _inSceneElements?;
+    private _overlayElements?;
+    private _engine;
+    private _cache;
+    private _width;
+    private _height;
+    private _heightHalf;
+    private _cameraWorldMatrix?;
+    private _temp;
+    private _lastDevicePixelRatio;
+    private _cameraMatrixUpdated;
+    private _previousCanvasDocumentPosition;
+    private _renderObserver;
     /**
-     * Renders all the sprites in the rendering manager.
-     * @param worldMatrix World matrix to apply to the sprites.
-     * @param projectionMatrix Projection matrix to apply to the sprites.
+     * Contruct an instance of HtmlMeshRenderer
+     * @param scene
+     * @param options object containing the following optional properties:
+     * @returns
      */
-    render(worldMatrix: ThinMatrix, projectionMatrix: ThinMatrix): void;
+    constructor(scene: Scene, { parentContainerId, _containerId, enableOverlayRender, defaultOpaqueRenderOrder, defaultAlphaTestRenderOrder, defaultTransparentRenderOrder, }?: {
+        parentContainerId?: string | null;
+        _containerId?: string;
+        defaultOpaqueRenderOrder?: RenderOrderFunction;
+        defaultAlphaTestRenderOrder?: RenderOrderFunction;
+        defaultTransparentRenderOrder?: RenderOrderFunction;
+        enableOverlayRender?: boolean;
+    });
     /**
-     * Disposes the rendering manager and its resources.
+     * Dispose of the HtmlMeshRenderer
      */
     dispose(): void;
-    private _customSpriteUpdate;
+    protected _init(scene: Scene, parentContainerId: string | null, enableOverlayRender: boolean, defaultOpaqueRenderOrder: RenderOrderFunction, defaultAlphaTestRenderOrder: RenderOrderFunction, defaultTransparentRenderOrder: RenderOrderFunction): void;
+    private _createRenderLayerElements;
+    protected _getSize(): {
+        width: number;
+        height: number;
+    };
+    protected _setSize(width: number, height: number): void;
+    protected _getCameraCssMatrix(matrix: Matrix): string;
+    protected _getHtmlContentCssMatrix(matrix: Matrix, useRightHandedSystem: boolean): string;
+    protected _getTransformationMatrix(htmlMesh: HtmlMesh, useRightHandedSystem: boolean): Matrix;
+    protected _renderHtmlMesh(htmlMesh: HtmlMesh, useRightHandedSystem: boolean): void;
+    protected _render(scene: Scene, camera: Camera): void;
+    protected _updateBaseScaleFactor(htmlMesh: HtmlMesh): void;
+    protected _updateContainerPositionIfNeeded(): void;
+    protected _onCameraMatrixChanged: (camera: Camera) => void;
+    private _epsilon;
+    private _getAncestorMarginsAndPadding;
 }
+export {};
 
 }
-declare module "babylonjs-addons/lottie/rendering/node" {
-import { IVector2Like } from "babylonjs/Maths/math.like";
-import { ScalarProperty, Vector2Property } from "babylonjs-addons/lottie/lottie/parsedTypes";
-import { ThinMatrix } from "babylonjs-addons/lottie/maths/matrix";
+declare module "babylonjs-addons/htmlMesh/htmlMesh" {
+import { Mesh } from "babylonjs/Meshes/mesh";
+import { Scene } from "babylonjs/scene";
+import { FitStrategyType } from "babylonjs-addons/htmlMesh/fitStrategy";
 /**
- * Represents a node in the scenegraph that contains the animation information from a lottie animation layer or group.
+ * This class represents HTML content that we want to render as though it is part of the scene.  The HTML content is actually
+ * rendered below the canvas, but a depth mask is created by this class that writes to the depth buffer but does not
+ * write to the color buffer, effectively punching a hole in the canvas.  CSS transforms are used to scale, translate, and rotate
+ * the HTML content so that it matches the camera and mesh orientation.  The class supports interactions in editable and non-editable mode.
+ * In non-editable mode (the default), events are passed to the HTML content when the pointer is over the mask (and not occluded by other meshes
+ * in the scene).
+ * @see https://playground.babylonjs.com/#HVHYJC#5
+ * @see https://playground.babylonjs.com/#B17TC7#112
  */
-export class Node {
-    private readonly _id;
-    private readonly _ignoreOpacityAnimations;
-    private readonly _position;
-    private readonly _rotation;
-    private readonly _scale;
-    private _worldMatrix;
-    private _localMatrix;
-    private _globalMatrix;
-    private readonly _opacity;
-    private readonly _parent;
-    private readonly _children;
-    private _isVisible;
-    private _isAnimated;
-    private _animationsFunctions;
-    protected _isControl: boolean;
-    protected _isShape: boolean;
+export class HtmlMesh extends Mesh {
     /**
-     * Gets the id of this node.
-     * @returns The unique identifier of this node.
+     * Helps identifying a html mesh from a regular mesh
      */
-    get id(): string;
+    get isHtmlMesh(): boolean;
+    private _enabled;
+    private _ready;
     /**
-     * Gets the childer of this node.
-     * @returns An array of child nodes.
+     * @internal
      */
-    get children(): Node[];
+    _isCanvasOverlay: boolean;
+    private _requiresUpdate;
+    private _element?;
+    private _width?;
+    private _height?;
+    private _inverseScaleMatrix;
+    private _captureOnPointerEnter;
+    private _pointerEventCaptureBehavior;
+    private _sourceWidth;
+    private _sourceHeight;
     /**
-     * Gets whether this node is a shape.
-     * @returns True if this node is a shape, false otherwise.
+     * Return the source width of the content in pixels
      */
-    get isShape(): boolean;
+    get sourceWidth(): number | null;
     /**
-     * Gets the world matrix of this node.
-     * @returns The world matrix.
+     * Return the source height of the content in pixels
      */
-    get worldMatrix(): ThinMatrix;
+    get sourceHeight(): number | null;
+    private _worldMatrixUpdateObserver;
+    private _fitStrategy;
     /**
-     * Gets whether this node is animated.
-     * @returns True if this node has animations, false otherwise.
+     * Contruct an instance of HtmlMesh
+     * @param scene
+     * @param id The id of the mesh.  Will be used as the id of the HTML element as well.
+     * @param options object with optional parameters
      */
-    get isAnimated(): boolean;
+    constructor(scene: Scene, id: string, { captureOnPointerEnter, isCanvasOverlay, fitStrategy }?: {
+        captureOnPointerEnter?: boolean | undefined;
+        isCanvasOverlay?: boolean | undefined;
+        fitStrategy?: FitStrategyType | undefined;
+    });
     /**
-     * Gets the opacity of this node.
-     * If the node is not visible, the opacity will be 0.
-     * @returns The opacity of the node, from 0 to 1.
+     * The width of the content in pixels
      */
-    get opacity(): number;
+    get width(): number | undefined;
     /**
-     * Gets the initial scale of this node.
-     * @returns The initial scale.
+     * The height of the content in pixels
      */
-    get startScale(): IVector2Like;
+    get height(): number | undefined;
     /**
-     * Gets the parent node of this node.
-     * @returns The parent node, or undefined if this is a root node.
+     * The HTML element that is being rendered as a mesh
      */
-    get parent(): Node | undefined;
+    get element(): HTMLElement | undefined;
     /**
-     * Sets the node visibility.
-     * @param value The new visibility value.
+     * True if the mesh has been moved, rotated, or scaled since the last time this
+     * property was read.  This property is reset to false after reading.
      */
-    set isVisible(value: boolean);
+    get requiresUpdate(): boolean;
     /**
-     * Constructs a new node.
-     * @param id Unique identifier for the node.
-     * @param ignoreOpacityAnimations If there are no animations on opacity, mark this as true to ignore and optimize CPU usage.
-     * @param position Position of the node in the scene.
-     * @param rotation Rotation of the node in degrees.
-     * @param scale Scale of the node in the scene.
-     * @param opacity Opacity of the node, from 0 to 1.
-     * @param parent Parent node in the scenegraph.
+     * Enable capture for the pointer when entering the mesh area
      */
-    constructor(id: string, ignoreOpacityAnimations: boolean, position?: Vector2Property, rotation?: ScalarProperty, scale?: Vector2Property, opacity?: ScalarProperty, parent?: Node);
+    set captureOnPointerEnter(captureOnPointerEnter: boolean);
     /**
-     * Resets the node's properties to their initial values.
-     */
-    reset(): void;
-    /**
-     * Updates the node's properties based on the current frame of the animation.
-     * @param frame Frame number we are playing in the animation.
-     * @param isParentUpdated Whether the parent node has been updated.
-     * @param isReset Whether the node is being reset.
-     * @returns True if the node was updated, false otherwise.
-     */
-    update(frame: number, isParentUpdated?: boolean, isReset?: boolean): boolean;
-    private _updatePosition;
-    private _updateRotation;
-    private _updateScale;
-    private _updateOpacity;
-}
-
-}
-declare module "babylonjs-addons/lottie/rendering/controlNode" {
-import { ScalarProperty, Vector2Property } from "babylonjs-addons/lottie/lottie/parsedTypes";
-import { Node } from "babylonjs-addons/lottie/rendering/node";
-/**
- * This represents a top node of the scenegraph in a Lottie animation.
- * Each top level layer in Lottie is represented by a control node node.
- */
-export class ControlNode extends Node {
-    private _inFrame;
-    private _outFrame;
-    /**
-     * Constructs a new control node.
-     * @param id Unique identifier for the node.
-     * @param ignoreOpacityAnimations If there are no animations on opacity, mark this as true to ignore and optimize CPU usage.
-     * @param inFrame Frame at which the node becomes active.
-     * @param outFrame Frame at which the node becomes inactive.
-     * @param position Position of the node in the scene.
-     * @param rotation Rotation of the node in degrees.
-     * @param scale Scale of the node in the scene.
-     * @param opacity Opacity of the node, from 0 to 1.
-     * @param parent Parent node in the scenegraph.
-     */
-    constructor(id: string, ignoreOpacityAnimations: boolean, inFrame: number, outFrame: number, position?: Vector2Property, rotation?: ScalarProperty, scale?: Vector2Property, opacity?: ScalarProperty, parent?: Node);
-    /**
-     * Updates the node's properties based on the current frame of the animation.
-     * This node will only be updated if the current frame is within the in and out range.
-     * @param frame Frame number we are playing in the animation.
-     * @param isParentUpdated Whether the parent node has been updated.
-     * @param isReset Whether the node is being reset.
-     * @returns True if the node was updated, false otherwise.
-     */
-    update(frame: number, isParentUpdated?: boolean, isReset?: boolean): boolean;
-}
-
-}
-declare module "babylonjs-addons/lottie/rendering/animationController" {
-import "babylonjs/Engines/Extensions/engine.alpha";
-import "babylonjs/Shaders/sprites.vertex";
-import "babylonjs/Shaders/sprites.fragment";
-import { AnimationConfiguration } from "babylonjs-addons/lottie/lottiePlayer";
-/**
- * Class that controls the playing of lottie animations using Babylon.js
- */
-export class AnimationController {
-    private _isReady;
-    private readonly _canvas;
-    private readonly _configuration;
-    private readonly _engine;
-    private readonly _spritePacker;
-    private _animation?;
-    private readonly _viewport;
-    private readonly _projectionMatrix;
-    private readonly _worldMatrix;
-    private _frameDuration;
-    private _currentFrame;
-    private _isPlaying;
-    private _animationFrameId;
-    private _lastFrameTime;
-    private _deltaTime;
-    private _loop;
-    private _accumulatedTime;
-    private _framesToAdvance;
-    private readonly _renderingManager;
-    /**
-     * Gets the canvas used for rendering the animation.
-     * @returns The canvas element used for rendering.
-     */
-    get view(): HTMLCanvasElement;
-    /**
-     * Gets the height of the animation in pixels.
-     * @returns The height of the animation in pixels.
-     */
-    get animationHeight(): number;
-    /**
-     * Gets the width of the animation in pixels.
-     * @returns The width of the animation in pixels.
-     */
-    get animationWidth(): number;
-    /**
-     * Creates a new instance of the Player.
-     * @param canvas The canvas element to render the animation on.
-     * @param animationJson The JSON string of the Lottie animation to be played.
-     * @param configuration The configuration for the animation player.
-     */
-    constructor(canvas: HTMLCanvasElement, animationJson: string, configuration: AnimationConfiguration);
-    /**
-     * Plays the animation.
-     * @param loop If true, the animation will loop when it reaches the end.
-     */
-    playAnimation(loop?: boolean): void;
-    /**
-     * Stops the animation playback.
-     */
-    stopAnimation(): void;
-    /**
-     * Sets the rendering size for the engine
-     * @param width Width of the rendering canvas
-     * @param height Height of the rendering canvas
-     */
-    setSize(width: number, height: number): void;
-    /**
-     * Disposes the player and releases all resources.
+     * Disposes of the mesh and the HTML element
      */
     dispose(): void;
-    private _cleanTree;
-    private _startRenderLoop;
-    private _render;
-}
-
-}
-declare module "babylonjs-addons/lottie/maths/matrix" {
-import { IMatrixLike, IVector2Like } from "babylonjs/Maths/math.like";
-import { Tuple } from "babylonjs/types";
-/**
- * Represents a Babylon.js thin version of a Matrix
- * We are only exposing what we truly need in the scope of
- * the Lottie Renderer project preventing the dependency on the full
- * Babylon.js math system.
- */
-export class ThinMatrix implements IMatrixLike {
-    /**
-     * Prevents global conflicts on update as shader programs are shared.
-     */
-    private static _UPDATE_FLAG_SEED;
-    /**
-     * Current update flag used to know whether a Matrix has changed since previous render or not.
-     * This helps identifying if a Matrix needs to be
-     * uploaded to a shader program.
-     */
-    updateFlag: number;
-    private readonly _data;
-    /**
-     * Creates a new ThinMatrix instance.
-     */
-    constructor();
-    /**
-     * Set the matrix values.
-     * @param m11 Value for row 1, column 1
-     * @param m12 Value for row 1, column 2
-     * @param m13 Value for row 1, column 3
-     * @param m14 Value for row 1, column 4
-     * @param m21 Value for row 2, column 1
-     * @param m22 Value for row 2, column 2
-     * @param m23 Value for row 2, column 3
-     * @param m24 Value for row 2, column 4
-     * @param m31 Value for row 3, column 1
-     * @param m32 Value for row 3, column 2
-     * @param m33 Value for row 3, column 3
-     * @param m34 Value for row 3, column 4
-     * @param m41 Value for row 4, column 1
-     * @param m42 Value for row 4, column 2
-     * @param m43 Value for row 4, column 3
-     * @param m44 Value for row 4, column 4
-     * @returns The updated ThinMatrix instance
-     */
-    setValues(m11: number, m12: number, m13: number, m14: number, m21: number, m22: number, m23: number, m24: number, m31: number, m32: number, m33: number, m34: number, m41: number, m42: number, m43: number, m44: number): ThinMatrix;
-    /**
-     * Set the matrix to an identity matrix.
-     * @returns The updated ThinMatrix instance
-     */
-    identity(): ThinMatrix;
-    /**
-     * Stores a left-handed orthographic projection into a given matrix
-     * @param left defines the viewport left coordinate
-     * @param right defines the viewport right coordinate
-     * @param bottom defines the viewport bottom coordinate
-     * @param top defines the viewport top coordinate
-     * @param znear defines the near clip plane
-     * @param zfar defines the far clip plane
-     * @returns The updated ThinMatrix instance
-     */
-    orthoOffCenterLeftHanded(left: number, right: number, bottom: number, top: number, znear: number, zfar: number): ThinMatrix;
-    /**
-     * Sets a matrix to a value composed by merging scale (vector2), rotation (roll around z) and translation (vector2)
-     * This only updates the parts of the matrix that are used for 2D transformations.
-     * @param scale defines the scale vector
-     * @param roll defines the rotation around z
-     * @param translation defines the translation vector
-     * @returns the updated ThinMatrix instance
-     */
-    compose(scale: IVector2Like, roll: number, translation: IVector2Like): ThinMatrix;
-    /**
-     * Sets the current matrix with the multiplication result of the current Matrix and the given one
-     * This only updates the parts of the matrix that are used for 2D transformations.
-     * @param other defines the second operand
-     * @param output the matrix to store the result in
-     * @returns the current matrix
-     */
-    multiplyToRef(other: ThinMatrix, output: ThinMatrix): ThinMatrix;
-    /**
-     * Returns the matrix data array.
-     * @returns The matrix data
-     */
-    asArray(): Tuple<number, 16>;
-    /**
-     * Decomposes the matrix into scale, rotation, and translation.
-     * @param scale Scale vector to store the scale values
-     * @param translation Translation vector to store the translation values
-     * @returns The rotation in radians
-     */
-    decompose(scale: IVector2Like, translation: IVector2Like): number;
-}
-
-}
-declare module "babylonjs-addons/lottie/maths/boundingBox" {
-import { RawGroupShape } from "babylonjs-addons/lottie/lottie/rawTypes";
-/**
- * Represents a bounding box for a shape in the animation.
- */
-export type BoundingBox = {
-    /**
-     * Height of the bounding box
-     */
-    height: number;
-    /**
-     * Width of the bounding box
-     */
-    width: number;
-    /**
-     * X coordinate of the center of the bounding box
-     */
-    centerX: number;
-    /**
-     * Y coordinate of the center of the bounding box
-     */
-    centerY: number;
-};
-/**
- * Calculates the bounding box for a group shape in a Lottie animation.
- * @param rawGroup The raw group shape to calculate the bounding box for
- * @returns The bounding box for the group shape
- */
-export function GetBoundingBox(rawGroup: RawGroupShape): BoundingBox;
-
-}
-declare module "babylonjs-addons/lottie/maths/bezier" {
-/**
- * Represents a Babylon.js thin version of a cubic bezier curve
- * We are only exposing what we truly need in the scope of
- * the Lottie Renderer project preventing the dependency on the full
- * Babylon.js animation system.
- */
-export class BezierCurve {
-    /**
-     * X of the first control point
-     */
-    readonly x1: number;
-    /**
-     * Y of the first control point
-     */
-    readonly y1: number;
-    /**
-     * X of the second control point
-     */
-    readonly x2: number;
-    /**
-     * Y of the second control point
-     */
-    readonly y2: number;
-    private readonly _easingSteps;
-    private readonly _f0;
-    private readonly _f1;
-    private readonly _f2;
-    /**
-     * Instantiates a bezier function
-     * @see http://cubic-bezier.com/#.17,.67,.83,.67
-     * @param x1 Defines the x component of the start tangent in the bezier curve
-     * @param y1 Defines the y component of the start tangent in the bezier curve
-     * @param x2 Defines the x component of the end tangent in the bezier curve
-     * @param y2 Defines the y component of the end tangent in the bezier curve
-     * @param easingSteps Number of steps to sample the bezier curve for easing
-     */
-    constructor(x1: number | undefined, y1: number | undefined, x2: number | undefined, y2: number | undefined, easingSteps: number);
-    /**
-     * Interpolates the bezier curve at a given time
-     * @param t Defines the time to evaluate the bezier curve at, between 0 and 1
-     * @returns The interpolated value at time t
-     */
-    interpolate(t: number): number;
-}
-
-}
-declare module "babylonjs-addons/lottie/lottie/rawTypes" {
-export type RawLottieAnimation = {
-    v: string;
-    fr: number;
-    ip: number;
-    op: number;
-    w: number;
-    h: number;
-    nm?: string;
-    layers: RawLottieLayer[];
-};
-export type RawLottieLayer = {
-    ind?: number;
-    ty: RawLayerType;
-    nm?: string;
-    parent?: number;
-    hd?: boolean;
-    sr?: number;
-    ao?: number;
-    ip?: number;
-    op?: number;
-    st?: number;
-    ct?: number;
-    ks: RawTransform;
-    shapes?: RawGraphicElement[];
-};
-export type RawGraphicElement = {
-    nm?: string;
-    hd?: boolean;
-    ty: RawShapeType;
-    bm?: number;
-    ix?: number;
-};
-export type RawGroupShape = RawGraphicElement & {
-    it?: RawGraphicElement[];
-};
-export type RawRectangleShape = RawGraphicElement & {
-    d: RawShapeDirection;
-    p: RawPositionProperty;
-    s: RawVectorProperty;
-    r: RawScalarProperty;
-};
-export type RawPathShape = RawGraphicElement & {
-    d: RawShapeDirection;
-    ks: RawBezierShapeProperty;
-};
-export type RawFillShape = RawGraphicElement & {
-    o: RawScalarProperty;
-    c: RawColorProperty;
-    r: RawFillRule;
-};
-export type RawGradientFillShape = RawGraphicElement & {
-    o: RawScalarProperty;
-    g: RawGradientsProperty;
-    s: RawPositionProperty;
-    e: RawPositionProperty;
-    t: RawGradientType;
-    h: RawScalarProperty;
-    a?: RawScalarProperty;
-    r: RawFillRule;
-};
-export type RawTransformShape = RawGraphicElement & {
-    a: RawPositionProperty;
-    p: RawPositionProperty;
-    r: RawScalarProperty;
-    s: RawVectorProperty;
-    o: RawScalarProperty;
-    sk: RawScalarProperty;
-    sa: RawScalarProperty;
-};
-export type RawTransform = {
-    a?: RawPositionProperty;
-    p?: RawPositionProperty;
-    r?: RawScalarProperty;
-    s?: RawVectorProperty;
-    o?: RawScalarProperty;
-};
-export type RawScalarProperty = {
-    a: RawNumberBoolean;
-    k: number | RawVectorKeyframe[];
-};
-export type RawVectorProperty = {
-    a: RawNumberBoolean;
-    k: number[] | RawVectorKeyframe[];
-    l: number;
-};
-export type RawVectorKeyframe = {
-    t: number;
-    s: number[];
-    h?: RawNumberBoolean;
-    i?: RawKeyFrameEasing;
-    o?: RawKeyFrameEasing;
-};
-export type RawPositionProperty = {
-    a: RawNumberBoolean;
-    k: number[] | RawPositionKeyframe[];
-    l: number;
-};
-export type RawPositionKeyframe = {
-    t: number;
-    h?: RawNumberBoolean;
-    i?: RawKeyFrameEasing;
-    o?: RawKeyFrameEasing;
-    s: number[];
-    ti: number[];
-    to: number[];
-};
-export type RawBezierShapeProperty = {
-    a: RawNumberBoolean;
-    k: RawBezier | RawBezierShapeKeyframe[];
-};
-export type RawBezierShapeKeyframe = {
-    t: number;
-    h?: RawNumberBoolean;
-    i?: RawKeyFrameEasing;
-    o?: RawKeyFrameEasing;
-    s: RawBezier[];
-};
-export type RawColorProperty = {
-    a: RawNumberBoolean;
-    k: number[] | RawColorKeyframe[];
-};
-export type RawColorKeyframe = {
-    t: number;
-    h?: RawNumberBoolean;
-    i?: RawKeyFrameEasing;
-    o?: RawKeyFrameEasing;
-    s: number[];
-};
-export type RawGradientsProperty = {
-    p: number;
-    k: RawGradientProperty;
-};
-export type RawGradientProperty = {
-    a: RawNumberBoolean;
-    k: number[];
-};
-export type RawKeyFrameEasing = {
-    x: number | number[];
-    y: number | number[];
-};
-export type RawBezier = {
-    c: boolean;
-    i: number[][];
-    o: number[][];
-    v: number[][];
-};
-export type RawNumberBoolean = 0 | 1;
-export type RawLayerType = 0 | 1 | 2 | 3 | 4 | 5 | 6;
-export type RawShapeType = "fl" | "gf" | "gr" | "tr" | "sh" | "rc";
-export type RawShapeDirection = 1 | 3;
-export type RawFillRule = 1 | 2;
-export type RawGradientType = 1 | 2;
-
-}
-declare module "babylonjs-addons/lottie/lottie/parsedTypes" {
-import { IVector2Like } from "babylonjs/Maths/math.like";
-import { BezierCurve } from "babylonjs-addons/lottie/maths/bezier";
-import { Node } from "babylonjs-addons/lottie/rendering/node";
-/**
- * Represents a Babylon.js thin version of a Lottie animation.
- */
-export type AnimationInfo = {
-    /**
-     * Frame number where the animation starts.
-     */
-    startFrame: number;
-    /**
-     * Frame number where the animation ends.
-     */
-    endFrame: number;
-    /**
-     * Frame rate of the animation.
-     */
-    frameRate: number;
-    /**
-     * Width of the animation in pixels
-     */
-    widthPx: number;
-    /**
-     * Height of the animation in pixels
-     */
-    heightPx: number;
-    /**
-     * Nodes representing the animation
-     */
-    nodes: Node[];
-};
-/**
- * Transform properties for a Lottie animation.
- * Any of these properties may be animated.
- */
-export type Transform = {
-    /**
-     * The anchor point of the layer, which is the point around which transformations are applied.
-     */
-    anchorPoint: Vector2Property;
-    /**
-     * The position of the layer in the animation.
-     */
-    position: Vector2Property;
-    /**
-     * The rotation of the layer in degrees.
-     */
-    rotation: ScalarProperty;
-    /**
-     * The scale of the layer in the X and Y axis.
-     */
-    scale: Vector2Property;
-    /**
-     * The opacity of the layer, represented as a scalar value.
-     */
-    opacity: ScalarProperty;
-};
-/**
- * Represents a scalar that can be animated.
- */
-export type ScalarProperty = {
-    /**
-     * The initial value of the property at the start of the animation.
-     */
-    startValue: number;
-    /**
-     * The current value of the property during the animation.
-     */
-    currentValue: number;
-    /**
-     * An array of keyframes for the property.
-     */
-    keyframes?: ScalarKeyframe[];
-    /**
-     * The index of the current keyframe being processed in the animation.
-     */
-    currentKeyframeIndex: number;
-};
-/**
- * Represents a keyframe for a scalar property.
- */
-export type ScalarKeyframe = {
     /**
-     * The value at this keyframe.
-     */
-    value: number;
-    /**
-     * The time at which this keyframe occurs in the animation, in frames.
-     */
-    time: number;
-    /**
-     * The easing function applied to the transition from this keyframe to the next one.
-     */
-    easeFunction: BezierCurve;
-};
-/**
- * Represents a 2D vector that can be animated.
- */
-export type Vector2Property = {
-    /**
-     * The initial value at the start of the animation.
-     */
-    startValue: IVector2Like;
-    /**
-     * The current value during the animation.
-     */
-    currentValue: IVector2Like;
-    /**
-     * An array of keyframes for the property.
-     */
-    keyframes?: Vector2Keyframe[];
-    /**
-     * The index of the current keyframe being processed in the animation.
-     */
-    currentKeyframeIndex: number;
-};
-/**
- * Represents a keyframe for a 2D vector property.
- */
-export type Vector2Keyframe = {
-    /**
-     * The value at this keyframe.
-     */
-    value: IVector2Like;
-    /**
-     * The time at which this keyframe occurs in the animation, in frames.
-     */
-    time: number;
-    /**
-     * The easing function applied to the transition from this keyframe to the next one.
-     * This is used for the first dimension of the vector.
+     * @internal
      */
-    easeFunction1: BezierCurve;
+    _markAsUpdated(): void;
     /**
-     * The easing function applied to the transition from this keyframe to the next one.
-     * This is used for the second dimension of the vector.
+     * Sets the content of the element to the specified content adjusting the mesh scale to match and making it visible.
+     * If the the specified content is undefined, then it will make the mesh invisible.  In either case it will clear the
+     * element content first.
+     * @param element The element to render as a mesh
+     * @param width The width of the mesh in Babylon units
+     * @param height The height of the mesh in Babylon units
      */
-    easeFunction2: BezierCurve;
-};
-
-}
-declare module "babylonjs-addons/lottie/lottie/animationParser" {
-import { AnimationInfo } from "babylonjs-addons/lottie/lottie/parsedTypes";
-import { SpritePacker } from "babylonjs-addons/lottie/sprites/spritePacker";
-import { RenderingManager } from "babylonjs-addons/lottie/rendering/renderingManager";
-import { AnimationConfiguration } from "babylonjs-addons/lottie/lottiePlayer";
-/**
- * Parses a lottie animation file and converts it into a format that can be rendered by Babylon.js
- * Important: not all lottie features are supported, you can call .debug() after parsing an animation to see what features were not supported.
- */
-export class AnimationParser {
-    private _packer;
-    private readonly _renderingManager;
-    private readonly _configuration;
-    private readonly _animationInfo;
-    private _unsupportedFeatures;
-    private _parentNodes;
-    private _rootNodes;
-    private _shape;
+    setContent(element: HTMLElement, width: number, height: number): void;
+    setEnabled(enabled: boolean): void;
     /**
-     * Get the animation information parsed from the Lottie file.
+     * Sets the content size in pixels
+     * @param width width of the source
+     * @param height height of the source
      */
-    get animationInfo(): AnimationInfo;
+    setContentSizePx(width: number, height: number): void;
+    protected _setAsReady(ready: boolean): void;
+    protected _doSetEnabled(enabled: boolean): void;
+    protected _updateScaleIfNecessary(): void;
+    protected _createMask(): void;
+    protected _setElementzIndex(zIndex: number): void;
     /**
-     * Creates a new instance of the Lottie animations parser.
-     * @param packer Object that packs the sprites from the animation into a texture atlas.
-     * @param fileContentAsJsonString The content of the lottie file as a JSON string.
-     * @param configuration Configuration options for the animation parser.
-     * @param renderingManager Object that manages the rendering of the sprites in the animation.
+     * Callback used by the PointerEventsCaptureBehavior to capture pointer events
      */
-    constructor(packer: SpritePacker, fileContentAsJsonString: string, configuration: AnimationConfiguration, renderingManager: RenderingManager);
+    capturePointerEvents(): void;
     /**
-     * Logs to the console all issues that were encountered during parsing the file.
+     * Callback used by the PointerEventsCaptureBehavior to release pointer events
      */
-    debug(): void;
-    private _loadFromData;
-    private _parseLayer;
-    private _parseShapes;
-    private _parseGroupShape;
-    private _parseTransform;
-    private _fromLottieScalarToBabylonScalar;
-    private _fromLottieVector2ToBabylonVector2;
-    private _calculateFinalVector;
-    private _getScaleFactor;
-    private _validatePathShape;
-    private _validateRectangleShape;
-    private _validateFillShape;
-    private _validateGradientFillShape;
-}
-
-}
-declare module "babylonjs-addons/htmlMesh/pointerEventsCaptureBehavior" {
-import { AbstractMesh } from "babylonjs/Meshes/abstractMesh";
-import { Behavior } from "babylonjs/Behaviors/behavior";
-/**
- * Behavior for any content that can capture pointer events, i.e. bypass the Babylon pointer event handling
- * and receive pointer events directly.  It will register the capture triggers and negotiate the capture and
- * release of pointer events.  Curerntly this applies only to HtmlMesh
- */
-export class PointerEventsCaptureBehavior implements Behavior<AbstractMesh> {
-    private _captureCallback;
-    private _releaseCallback;
-    /** gets or sets behavior's name */
-    name: string;
-    private _attachedMesh;
-    /** @internal */
-    _captureOnPointerEnter: boolean;
-    /**
-     * Gets or sets the mesh that the behavior is attached to
-     */
-    get attachedMesh(): AbstractMesh | null;
-    set attachedMesh(value: AbstractMesh | null);
-    constructor(_captureCallback: () => void, _releaseCallback: () => void, { captureOnPointerEnter }?: {
-        captureOnPointerEnter?: boolean | undefined;
-    });
-    /**
-     * Set if the behavior should capture pointer events when the pointer enters the mesh
-     */
-    set captureOnPointerEnter(captureOnPointerEnter: boolean);
-    /**
-     * Function called when the behavior needs to be initialized (before attaching it to a target)
-     */
-    init(): void;
-    /**
-     * Called when the behavior is attached to a target
-     * @param mesh defines the target where the behavior is attached to
-     */
-    attach(mesh: AbstractMesh): void;
-    /**
-     * Called when the behavior is detached from its target
-     */
-    detach(): void;
-    /**
-     * Dispose the behavior
-     */
-    dispose(): void;
-    releasePointerEvents(): void;
-    capturePointerEvents(): void;
-}
-
-}
-declare module "babylonjs-addons/htmlMesh/pointerEventsCapture" {
-type CaptureReleaseCallback = () => void;
-/**
- * Get the id of the object currently capturing pointer events
- * @returns The id of the object currently capturing pointer events
- * or null if no object is capturing pointer events
- */
-export const getCapturingId: () => string | null;
-/**
- * Request that the object with the given id capture pointer events.  If there is no current
- * owner, then the request is granted immediately.  If there is a current owner, then the request
- * is queued until the current owner releases pointer events.
- * @param requestId An id to identify the request.  This id will be used to match the capture
- * request with the release request.
- * @param captureCallback The callback to call when the request is granted and the object is capturing
- * @param releaseCallback The callback to call when the object is no longer capturing pointer events
- */
-export const requestCapture: (requestId: string, captureCallback: CaptureReleaseCallback, releaseCallback: CaptureReleaseCallback) => void;
-/**
- * Release pointer events from the object with the given id.  If the object is the current owner
- * then pointer events are released immediately.  If the object is not the current owner, then the
- * associated capture request is removed from the queue.  If there is no matching capture request
- * in the queue, then the release request is added to a list of unmatched release requests and will
- * negate the next capture request with the same id.  This is to guard against the possibility that
- * the release request arrived before the capture request.
- * @param requestId The id which should match the id of the capture request
- */
-export const requestRelease: (requestId: string | null) => void;
-/**
- * Release pointer events from the current owner
- */
-export const releaseCurrent: () => void;
-global {
-    interface Window {
-        "pointer-events-capture-debug": boolean | null;
-    }
-}
-export {};
-
-}
-declare module "babylonjs-addons/htmlMesh/index" {
-import { HtmlMeshRenderer } from "babylonjs-addons/htmlMesh/htmlMeshRenderer";
-import { HtmlMesh } from "babylonjs-addons/htmlMesh/htmlMesh";
-import { PointerEventsCaptureBehavior } from "babylonjs-addons/htmlMesh/pointerEventsCaptureBehavior";
-import { FitStrategy } from "babylonjs-addons/htmlMesh/fitStrategy";
-export { HtmlMeshRenderer, HtmlMesh, PointerEventsCaptureBehavior, FitStrategy };
-
-}
-declare module "babylonjs-addons/htmlMesh/htmlMeshRenderer" {
-import { Scene } from "babylonjs/scene";
-import { Matrix } from "babylonjs/Maths/math";
-import { HtmlMesh } from "babylonjs-addons/htmlMesh/htmlMesh";
-import { Camera } from "babylonjs/Cameras/camera";
-import { SubMesh } from "babylonjs/Meshes/subMesh";
-/**
- * A function that compares two submeshes and returns a number indicating which
- * should be rendered first.
- */
-type RenderOrderFunction = (subMeshA: SubMesh, subMeshB: SubMesh) => number;
-/**
- * An instance of this is required to render HtmlMeshes in the scene.
- * if using HtmlMeshes, you must not set render order for group 0 using
- * scene.setRenderingOrder.  You must instead pass the compare functions
- * to the HtmlMeshRenderer constructor.  If you do not, then your render
- * order will be overwritten if the HtmlMeshRenderer is created after and
- * the HtmlMeshes will not render correctly (they will appear in front of
- * meshes that are actually in front of them) if the HtmlMeshRenderer is
- * created before.
- */
-export class HtmlMeshRenderer {
-    private _containerId?;
-    private _inSceneElements?;
-    private _overlayElements?;
-    private _engine;
-    private _cache;
-    private _width;
-    private _height;
-    private _heightHalf;
-    private _cameraWorldMatrix?;
-    private _temp;
-    private _lastDevicePixelRatio;
-    private _cameraMatrixUpdated;
-    private _previousCanvasDocumentPosition;
-    private _renderObserver;
-    /**
-     * Contruct an instance of HtmlMeshRenderer
-     * @param scene
-     * @param options object containing the following optional properties:
-     * @returns
-     */
-    constructor(scene: Scene, { parentContainerId, _containerId, enableOverlayRender, defaultOpaqueRenderOrder, defaultAlphaTestRenderOrder, defaultTransparentRenderOrder, }?: {
-        parentContainerId?: string | null;
-        _containerId?: string;
-        defaultOpaqueRenderOrder?: RenderOrderFunction;
-        defaultAlphaTestRenderOrder?: RenderOrderFunction;
-        defaultTransparentRenderOrder?: RenderOrderFunction;
-        enableOverlayRender?: boolean;
-    });
-    /**
-     * Dispose of the HtmlMeshRenderer
-     */
-    dispose(): void;
-    protected _init(scene: Scene, parentContainerId: string | null, enableOverlayRender: boolean, defaultOpaqueRenderOrder: RenderOrderFunction, defaultAlphaTestRenderOrder: RenderOrderFunction, defaultTransparentRenderOrder: RenderOrderFunction): void;
-    private _createRenderLayerElements;
-    protected _getSize(): {
-        width: number;
-        height: number;
-    };
-    protected _setSize(width: number, height: number): void;
-    protected _getCameraCssMatrix(matrix: Matrix): string;
-    protected _getHtmlContentCssMatrix(matrix: Matrix, useRightHandedSystem: boolean): string;
-    protected _getTransformationMatrix(htmlMesh: HtmlMesh, useRightHandedSystem: boolean): Matrix;
-    protected _renderHtmlMesh(htmlMesh: HtmlMesh, useRightHandedSystem: boolean): void;
-    protected _render(scene: Scene, camera: Camera): void;
-    protected _updateBaseScaleFactor(htmlMesh: HtmlMesh): void;
-    protected _updateContainerPositionIfNeeded(): void;
-    protected _onCameraMatrixChanged: (camera: Camera) => void;
-    private _epsilon;
-    private _getAncestorMarginsAndPadding;
-}
-export {};
-
-}
-declare module "babylonjs-addons/htmlMesh/htmlMesh" {
-import { Mesh } from "babylonjs/Meshes/mesh";
-import { Scene } from "babylonjs/scene";
-import { FitStrategyType } from "babylonjs-addons/htmlMesh/fitStrategy";
-/**
- * This class represents HTML content that we want to render as though it is part of the scene.  The HTML content is actually
- * rendered below the canvas, but a depth mask is created by this class that writes to the depth buffer but does not
- * write to the color buffer, effectively punching a hole in the canvas.  CSS transforms are used to scale, translate, and rotate
- * the HTML content so that it matches the camera and mesh orientation.  The class supports interactions in editable and non-editable mode.
- * In non-editable mode (the default), events are passed to the HTML content when the pointer is over the mask (and not occluded by other meshes
- * in the scene).
- * @see https://playground.babylonjs.com/#HVHYJC#5
- * @see https://playground.babylonjs.com/#B17TC7#112
- */
-export class HtmlMesh extends Mesh {
-    /**
-     * Helps identifying a html mesh from a regular mesh
-     */
-    get isHtmlMesh(): boolean;
-    private _enabled;
-    private _ready;
-    /**
-     * @internal
-     */
-    _isCanvasOverlay: boolean;
-    private _requiresUpdate;
-    private _element?;
-    private _width?;
-    private _height?;
-    private _inverseScaleMatrix;
-    private _captureOnPointerEnter;
-    private _pointerEventCaptureBehavior;
-    private _sourceWidth;
-    private _sourceHeight;
-    /**
-     * Return the source width of the content in pixels
-     */
-    get sourceWidth(): number | null;
-    /**
-     * Return the source height of the content in pixels
-     */
-    get sourceHeight(): number | null;
-    private _worldMatrixUpdateObserver;
-    private _fitStrategy;
-    /**
-     * Contruct an instance of HtmlMesh
-     * @param scene
-     * @param id The id of the mesh.  Will be used as the id of the HTML element as well.
-     * @param options object with optional parameters
-     */
-    constructor(scene: Scene, id: string, { captureOnPointerEnter, isCanvasOverlay, fitStrategy }?: {
-        captureOnPointerEnter?: boolean | undefined;
-        isCanvasOverlay?: boolean | undefined;
-        fitStrategy?: FitStrategyType | undefined;
-    });
-    /**
-     * The width of the content in pixels
-     */
-    get width(): number | undefined;
-    /**
-     * The height of the content in pixels
-     */
-    get height(): number | undefined;
-    /**
-     * The HTML element that is being rendered as a mesh
-     */
-    get element(): HTMLElement | undefined;
-    /**
-     * True if the mesh has been moved, rotated, or scaled since the last time this
-     * property was read.  This property is reset to false after reading.
-     */
-    get requiresUpdate(): boolean;
-    /**
-     * Enable capture for the pointer when entering the mesh area
-     */
-    set captureOnPointerEnter(captureOnPointerEnter: boolean);
-    /**
-     * Disposes of the mesh and the HTML element
-     */
-    dispose(): void;
-    /**
-     * @internal
-     */
-    _markAsUpdated(): void;
-    /**
-     * Sets the content of the element to the specified content adjusting the mesh scale to match and making it visible.
-     * If the the specified content is undefined, then it will make the mesh invisible.  In either case it will clear the
-     * element content first.
-     * @param element The element to render as a mesh
-     * @param width The width of the mesh in Babylon units
-     * @param height The height of the mesh in Babylon units
-     */
-    setContent(element: HTMLElement, width: number, height: number): void;
-    setEnabled(enabled: boolean): void;
-    /**
-     * Sets the content size in pixels
-     * @param width width of the source
-     * @param height height of the source
-     */
-    setContentSizePx(width: number, height: number): void;
-    protected _setAsReady(ready: boolean): void;
-    protected _doSetEnabled(enabled: boolean): void;
-    protected _updateScaleIfNecessary(): void;
-    protected _createMask(): void;
-    protected _setElementzIndex(zIndex: number): void;
-    /**
-     * Callback used by the PointerEventsCaptureBehavior to capture pointer events
-     */
-    capturePointerEvents(): void;
-    /**
-     * Callback used by the PointerEventsCaptureBehavior to release pointer events
-     */
-    releasePointerEvents(): void;
-    protected _createElement(): HTMLDivElement | undefined;
+    releasePointerEvents(): void;
+    protected _createElement(): HTMLDivElement | undefined;
 }
 
 }
@@ -1749,1377 +743,410 @@ declare module "babylonjs-addons/htmlMesh/fitStrategy" {
 export type FitStrategyType = {
     wrapElement(element: HTMLElement): HTMLElement;
     updateSize(sizingElement: HTMLElement, width: number, height: number): void;
-};
-export const FitStrategy: {
-    CONTAIN: FitStrategyType;
-    COVER: FitStrategyType;
-    STRETCH: FitStrategyType;
-    NONE: FitStrategyType;
-};
-
-}
-
-declare module "babylonjs-addons" {
-    export * from "babylonjs-addons/index";
-}
-
-
-declare module ADDONS {
-
-
-    /**
-     * Abstract Node class from Babylon.js
-     */
-    export interface INodeLike {
-        getWorldMatrix(): BABYLON.IMatrixLike;
-    }
-    /**
-     * Class used to render text using MSDF (Multi-channel Signed Distance Field) technique
-     * Thanks a lot to the work of Bhushan_Wagh and zb_sj for their amazing work on MSDF for Babylon.js
-     * #6RLCWP#16
-     * Star wars scroller: #6RLCWP#29
-     * With metrics: #6RLCWP#35
-     * Thickness: #IABMEZ#3
-     * Solar system: #9YCDYC#9
-     * Stroke: #6RLCWP#37
-     */
-    export class TextRenderer implements BABYLON.IDisposable {
-        private readonly _useVAO;
-        private _engine;
-        private _shaderLanguage;
-        private _vertexBuffers;
-        private _spriteBuffer;
-        private _worldBuffer;
-        private _uvBuffer;
-        private _drawWrapperBase;
-        private _vertexArrayObject;
-        private _font;
-        private _charMatrices;
-        private _charUvs;
-        private _isDirty;
-        private _baseLine;
-        private _scalingMatrix;
-        private _fontScaleMatrix;
-        private _offsetMatrix;
-        private _translationMatrix;
-        private _baseMatrix;
-        private _scaledMatrix;
-        private _localMatrix;
-        private _finalMatrix;
-        private _lineMatrix;
-        private _parentWorldMatrix;
-        /**
-         * Gets or sets the color of the text
-         */
-        color: BABYLON.IColor4Like;
-        /**
-         * Gets or sets the color of the stroke around the text
-         */
-        strokeColor: BABYLON.IColor4Like;
-        /**
-         * Gets or sets the width of the stroke around the text (inset)
-         */
-        strokeInsetWidth: number;
-        /**
-         * Gets or sets the width of the stroke around the text (outset)
-         */
-        strokeOutsetWidth: number;
-        /**
-         * Gets or sets the thickness of the text (0 means as defined in the font)
-         * Value must be between -0.5 and 0.5
-         */
-        thicknessControl: number;
-        private _parent;
-        /**
-         * Gets or sets the parent of the text renderer
-         */
-        get parent(): BABYLON.Nullable<INodeLike>;
-        set parent(value: BABYLON.Nullable<INodeLike>);
-        private _transformMatrix;
-        /**
-         * Gets or sets the transform matrix of the text renderer
-         * It will be applied in that order:
-         * parent x transform x paragraph world
-         */
-        get transformMatrix(): BABYLON.IMatrixLike;
-        set transformMatrix(value: BABYLON.IMatrixLike);
-        /**
-         * Gets or sets if the text is billboarded
-         */
-        isBillboard: boolean;
-        /**
-         * Gets or sets if the text is screen projected
-         * This will work only if the text is billboarded
-         */
-        isBillboardScreenProjected: boolean;
-        /**
-         * Gets the number of characters in the text renderer
-         */
-        get characterCount(): number;
-        /**
-         * Gets or sets if the text renderer should ignore the depth buffer
-         * Default is false
-         */
-        ignoreDepthBuffer: boolean;
-        private constructor();
-        private _resizeBuffers;
-        private _setShaders;
-        /**
-         * Add a paragraph of text to the renderer
-         * @param text define the text to add
-         * @param options define the options to use for the paragraph (optional)
-         * @param worldMatrix define the world matrix to use for the paragraph (optional)
-         */
-        addParagraph(text: string, options?: Partial<ParagraphOptions>, worldMatrix?: BABYLON.IMatrixLike): void;
-        /**
-         * Render the text using the provided view and projection matrices
-         * @param viewMatrix define the view matrix to use
-         * @param projectionMatrix define the projection matrix to use
-         */
-        render(viewMatrix: BABYLON.IMatrixLike, projectionMatrix: BABYLON.IMatrixLike): void;
-        /**
-         * Release associated resources
-         */
-        dispose(): void;
-        /**
-         * Creates a new TextRenderer instance asynchronously
-         * @param font define the font asset to use
-         * @param engine define the engine to use
-         * @returns a promise that resolves to the created TextRenderer instance
-         */
-        static CreateTextRendererAsync(font: FontAsset, engine: BABYLON.AbstractEngine): Promise<TextRenderer>;
-    }
-
-
-    /** @internal */
-    export type ParagraphOptions = {
-        maxWidth: number;
-        lineHeight: number;
-        letterSpacing: number;
-        tabSize: number;
-        whiteSpace: "pre-line";
-        textAlign: "left" | "right" | "center";
-        translate: BABYLON.IVector2Like | undefined;
-    };
-    /** @internal */
-    export var DefaultParagraphOptions: ParagraphOptions;
-
-
-
-
-    /**
-     * Class representing a font asset for SDF (Signed Distance Field) rendering.
-     */
-    export class FontAsset implements BABYLON.IDisposable {
-        private readonly _chars;
-        private readonly _charsRegex;
-        private readonly _kernings;
-        /** @internal */
-        readonly _font: SdfFont;
-        /**
-         * Gets the font scale value
-         */
-        readonly scale: number;
-        /**
-         * Gets the list of used textures
-         */
-        readonly textures: BABYLON.Texture[];
-        /**
-         * Creates a new FontAsset instance.
-         * @param definitionData defines the font data in JSON format.
-         * @param textureUrl defines the url of the texture to use for the font.
-         * @param scene defines the hosting scene.
-         */
-        constructor(definitionData: string, textureUrl: string, scene?: BABYLON.Scene);
-        dispose(): void;
-        private _updateFallbacks;
-        /** @internal */
-        _getChar(charCode: number): BMFontChar;
-        /** @internal */
-        _getKerning(first: number, second: number): number;
-        /** @internal */
-        _unsupportedChars(text: string): string;
-    }
-
-
-    /** @internal */
-    export var msdfVertexShaderWGSL: {
-        name: string;
-        shader: string;
-    };
-
-
-    /** @internal */
-    export var msdfPixelShaderWGSL: {
-        name: string;
-        shader: string;
-    };
-
-
-    /** @internal */
-    export var msdfVertexShader: {
-        name: string;
-        shader: string;
-    };
-
-
-    /** @internal */
-    export var msdfPixelShader: {
-        name: string;
-        shader: string;
-    };
-
-
-    /** @internal */
-    export class SdfTextParagraph {
-        readonly text: string;
-        readonly fontAsset: FontAsset;
-        readonly options: ParagraphOptions;
-        get lineHeight(): number;
-        readonly paragraph: string;
-        readonly lines: SdfTextLine[];
-        readonly width: number;
-        readonly height: number;
-        readonly glyphs: SdfGlyph[];
-        constructor(text: string, fontAsset: FontAsset, options?: Partial<ParagraphOptions>);
-        private _computeMetrics;
-        private _breakLines;
-        private _collapse;
-        private _wrap;
-    }
-
-
-    /** @internal */
-    export type SdfTextLine = {
-        text: string;
-        glyphs: SdfGlyph[];
-        start: number;
-        end: number;
-        width: number;
-    };
-
-
-
-
-    /** @internal */
-    export type SdfGlyph = {
-        char: BMFontChar;
-        /** index of the line */
-        line: number;
-        /** position within the line */
-        position: number;
-        x: number;
-        y: number;
-    };
-
-
-    export type SdfFontDistanceField = {
-        fieldType: "sdf" | "msdf";
-        distanceRange: number;
-    };
-    export type SdfFont = BMFont & {
-        distanceField: SdfFontDistanceField;
-    };
-
-
-    /**
-     * Holds information on how the font was generated.
-     */
-    export type BMFontInfo = {
-        /** The name of the font */
-        face: string;
-        /** The size of the font */
-        size: number;
-        /** The font is bold */
-        bold: number;
-        /** The font is italic */
-        italic: number;
-        /** The charset of the font */
-        charset: string[];
-        /** The charset is unicode  */
-        unicode: number;
-        /** The font height stretch in percentage. 100% means no stretch. */
-        stretchH: number;
-        /** Set to 1 if smoothing was turned on. */
-        smooth: number;
-        /** The supersampling level used. 1 means no supersampling was used. */
-        aa: number;
-        /** The padding for each character (up, right, down, left). */
-        padding: [number, number, number, number];
-        /** The spacing for each character (horizontal, vertical). */
-        spacing: [number, number];
-        /**
-         * The outline thickness for the characters.
-         *
-         * @remark missing in msdf-bmfont-xml
-         */
-        outline?: number;
-    };
-    /**
-     * Holds information common to all characters.
-     */
-    export type BMFontCommon = {
-        /** Distance in pixels between each line of text */
-        lineHeight: number;
-        /** The number of pixels from the absolute top of the line to the base of the characters */
-        base: number;
-        /** The width of the texture, normally used to scale the x pos of the character image */
-        scaleW: number;
-        /** The height of the texture, normally used to scale the y pos of the character image */
-        scaleH: number;
-        /** The number of pages in the font */
-        pages: number;
-        /** Set to 1 if the monochrome characters have been packed into each of the texture channels. In this case alphaChnl describes what is stored in each channel. */
-        packed: number;
-        /** Set to 0 if the channel holds the glyph data, 1 if it holds the outline, 2 if it holds the glyph and the outline, 3 if its set to zero, and 4 if its set to one. */
-        alphaChnl: number;
-        /** Set to 0 if the channel holds the glyph data, 1 if it holds the outline, 2 if it holds the glyph and the outline, 3 if its set to zero, and 4 if its set to one. */
-        redChnl: number;
-        /** Set to 0 if the channel holds the glyph data, 1 if it holds the outline, 2 if it holds the glyph and the outline, 3 if its set to zero, and 4 if its set to one. */
-        greenChnl: number;
-        /** Set to 0 if the channel holds the glyph data, 1 if it holds the outline, 2 if it holds the glyph and the outline, 3 if its set to zero, and 4 if its set to one. */
-        blueChnl: number;
-    };
-    /** Name of a texture file. There is one for each page in the font. */
-    export type BMFontPages = {
-        [id: number]: string;
-    } & Array<string>;
-    /**
-     * Describes a single character in the font
-     */
-    export type BMFontChar = {
-        /** Character id (charCode) */
-        id: number;
-        /** Left position of the character image in the texture. */
-        x: number;
-        /** Right position of the character image in the texture */
-        y: number;
-        /** Width of the chracter image in the texture */
-        width: number;
-        /** Height of the chracter image in the texture */
-        height: number;
-        /** Horizontal offset to be applied on screen */
-        xoffset: number;
-        /** Vertical offset to be applied on screen */
-        yoffset: number;
-        /** Horizontal advance after the character */
-        xadvance: number;
-        /** Page index where the character image is found */
-        page: number;
-        /** Texture channel where the chracter image is found
-         * - 1 = blue
-         * - 2 = green
-         * - 3 = red
-         * - 8 = alpha
-         * - 15 = all channels
-         */
-        chnl: number;
-    } & BMFontCharExtra;
-    /**
-     * additional context from msdf-bmfont-xml
-     */
-    export type BMFontCharExtra = {
-        /** index of opentype.js glyph */
-        index: number;
-        /** actual character*/
-        char: string;
-    };
-    /**
-     * The kerning information is used to adjust the distance between certain characters, e.g. some characters should be placed closer to each other than others.
-     */
-    export type BMFontKerning = {
-        /** The first character id. */
-        first: number;
-        /** The second character id. */
-        second: number;
-        /** How much the x position should be adjusted when drawing the second character immediately following the first. */
-        amount: number;
-    };
-    /**
-     * Compatible with [msdf-bmfont-xml](https://github.com/soimy/msdf-bmfont-xml)
-     * @see https://www.angelcode.com/products/bmfont/doc/file_format.html
-     */
-    export type BMFont = {
-        /** {@inheritDoc BMFontInfo} */
-        info: BMFontInfo;
-        /** {@inheritDoc BMFontCommon} */
-        common: BMFontCommon;
-        /** {@inheritDoc BMFontPages} */
-        pages: BMFontPages;
-        /** {@inheritDoc BMFontChar} */
-        chars: BMFontChar[];
-        /** {@inheritDoc BMFontKerning} */
-        kernings: BMFontKerning[];
-    };
-
-
-
-
-    /**
-     * Configuration options for the Lottie animation player.
-     */
-    export type AnimationConfiguration = {
-        /**
-         * Whether the animation should play on a loop or not
-         */
-        loopAnimation: boolean;
-        /**
-         * Size of the sprite atlas texture.
-         * Default is 2048.
-         */
-        spriteAtlasSize: number;
-        /**
-         * Gap size around sprites in the atlas.
-         * Default is 5.
-         */
-        gapSize: number;
-        /**
-         * Maximum number of sprites the renderer can handle at once.
-         * Default is 64.
-         */
-        spritesCapacity: number;
-        /**
-         * Background color for the animation canvas.
-         * Default is white with full opacity.
-         */
-        backgroundColor: {
-            r: number;
-            g: number;
-            b: number;
-            a: number;
-        };
-        /**
-         * Minimum scale factor to prevent too small sprites.
-         * Default is 5.
-         */
-        scaleMultiplier: number;
-        /**
-         * Scale factor for the rendering.
-         * Default is 1.
-         */
-        devicePixelRatio: number;
-        /**
-         * Number of steps to sample cubic bezier easing functions for animations.
-         * Default is 4.
-         */
-        easingSteps: number;
-        /**
-         * Whether to ignore opacity animations for performance.
-         * Default is true.
-         */
-        ignoreOpacityAnimations: boolean;
-        /**
-         * Whether to support device lost events for WebGL contexts.
-         * Default is false.
-         */
-        supportDeviceLost: boolean;
-    };
-    /**
-     * LottiePlayer is a class that allows you to play Lottie animations using Babylon.js.
-     * It plays the animations in a worker thread using OffscreenCanvas.
-     * Once instance of this class can only be used to play a single animation. If you want to play multiple animations, create a new instance for each animation.
-     */
-    export class LottiePlayer {
-        private _playing;
-        private _disposed;
-        private _worker;
-        private _canvas;
-        private _resizeObserver;
-        private readonly _container;
-        private readonly _animationFile;
-        private readonly _configuration;
-        /**
-         * Creates a new instance of the LottiePlayer.
-         * @param container The HTMLDivElement to create the canvas in and render the animation on.
-         * @param animationFile The URL of the Lottie animation file to be played.
-         * @param configuration Optional configuration object to customize the animation playback.
-         */
-        constructor(container: HTMLDivElement, animationFile: string, configuration?: Partial<AnimationConfiguration>);
-        /**
-         * Loads and plays a lottie animation.
-         * @returns True if the animation is successfully set up to play, false if the animation couldn't play.
-         */
-        playAnimation(): boolean;
-        /**
-         * Disposes the LottiePlayer instance, cleaning up resources and event listeners.
-         */
-        dispose(): void;
-        private _onWindowResize;
-        private _onBeforeUnload;
-    }
+};
+export const FitStrategy: {
+    CONTAIN: FitStrategyType;
+    COVER: FitStrategyType;
+    STRETCH: FitStrategyType;
+    NONE: FitStrategyType;
+};
 
+}
 
+declare module "babylonjs-addons" {
+    export * from "babylonjs-addons/index";
+}
 
 
-    /**
-     * Information about a sprite in the sprite atlas.
-     */
-    export type SpriteAtlasInfo = {
-        /**
-         * Offset in the x axis of the sprite in the atlas.
-         * Normalized between 0 and 1, left to right.
-         */
-        uOffset: number;
-        /**
-         * Offset in the y axis of the sprite in the atlas.
-         * Normalized between 0 and 1, top to bottom.
-         */
-        vOffset: number;
-        /**
-         * Width of the sprite in the atlas.
-         * In pixels.
-         */
-        cellWidth: number;
-        /**
-         * Height of the sprite in the atlas.
-         * In pixels.
-         */
-        cellHeight: number;
-        /**
-         * Width of the sprite in the screen.
-         * In pixels.
-         */
-        widthPx: number;
-        /**
-         * Height of the sprite in the screen.
-         * In pixels.
-         */
-        heightPx: number;
-        /**
-         * X coordinate of the center of the sprite bounding box, used for final positioning in the screen
-         */
-        centerX: number;
-        /**
-         * Y coordinate of the center of the sprite bounding box, used for final positioning in the screen
-         */
-        centerY: number;
-    };
-    /**
-     * SpritePacker is a class that handles the packing of sprites into a texture atlas.
-     */
-    export class SpritePacker {
-        private readonly _engine;
-        private readonly _configuration;
-        private _spritesCanvas;
-        private _spritesCanvasContext;
-        private readonly _spritesInternalTexture;
-        private readonly _spritesTexture;
-        private _isDirty;
-        private _currentX;
-        private _currentY;
-        private _maxRowHeight;
-        private _spriteAtlasInfo;
-        /**
-         * Gets the texture atlas that contains all the sprites packed by this SpritePacker.
-         * @returns The texture atlas containing the sprites.
-         */
-        get texture(): BABYLON.ThinTexture;
-        /**
-         * Creates a new instance of SpritePacker.
-         * @param engine Engine that will render the sprites.
-         * @param configuration Configuration options for the sprite packer.
-         */
-        constructor(engine: BABYLON.ThinEngine, configuration: AnimationConfiguration);
-        /**
-         * Adds a vector shape that comes from lottie data to the sprite atlas.
-         * @param rawGroup The raw group shape to add to the atlas.
-         * @param scalingFactor The scaling factor to apply to the shape.
-         * @returns The information on how to find the sprite in the atlas.
-         */
-        addLottieShape(rawGroup: RawGroupShape, scalingFactor: BABYLON.IVector2Like): SpriteAtlasInfo;
-        /**
-         * Updates the internal atlas texture with the information that has been added to the SpritePacker.
-         */
-        updateAtlasTexture(): void;
-        /**
-         * Releases the canvas and its context to allow garbage collection.
-         */
-        releaseCanvas(): void;
-        private _drawVectorShape;
-        private _drawRectangle;
-        private _drawPath;
-        private _drawFill;
-        private _drawGradientFill;
-        private _drawLinearGradientFill;
-        private _drawRadialGradientFill;
-        private _addColorStops;
-        private _gradientColorsToCssColor;
-        private _lottieColorToCSSColor;
-    }
+declare module ADDONS {
 
 
     /**
-     * Represents a sprite in the scene graph.
+     * Abstract Node class from Babylon.js
      */
-    export class SpriteNode extends Node {
-        private _sprite;
-        private _originalWidth;
-        private _originalHeight;
-        private _firstTime;
-        /**
-         * Creates a new SpriteNode instance.
-         * @param id Unique identifier for the sprite node.
-         * @param ignoreOpacityAnimations If there are no animations on opacity, mark this as true to ignore and optimize CPU usage.
-         * @param sprite The sprite associated with this node.
-         * @param position The position of the sprite in the scene.
-         * @param rotation The rotation of the sprite in degrees.
-         * @param scale The scale of the sprite in the scene.
-         * @param opacity The opacity of the sprite.
-         * @param parent The parent node in the scene graph.
-         */
-        constructor(id: string, ignoreOpacityAnimations: boolean, sprite: BABYLON.ThinSprite, position?: Vector2Property, rotation?: ScalarProperty, scale?: Vector2Property, opacity?: ScalarProperty, parent?: Node);
-        /**
-         * Updates the node's properties based on the current frame of the animation.
-         * @param frame Frame number we are playing in the animation.
-         * @param isParentUpdated Whether the parent node has been updated.
-         * @param isReset Whether the node is being reset.
-         * @returns True if the node was updated, false otherwise.
-         */
-        update(frame: number, isParentUpdated?: boolean, isReset?: boolean): boolean;
+    export interface INodeLike {
+        getWorldMatrix(): BABYLON.IMatrixLike;
     }
-
-
     /**
-     * Represents all the sprites from the animation and manages their rendering.
+     * Class used to render text using MSDF (Multi-channel Signed Distance Field) technique
+     * Thanks a lot to the work of Bhushan_Wagh and zb_sj for their amazing work on MSDF for Babylon.js
+     * #6RLCWP#16
+     * Star wars scroller: #6RLCWP#29
+     * With metrics: #6RLCWP#35
+     * Thickness: #IABMEZ#3
+     * Solar system: #9YCDYC#9
+     * Stroke: #6RLCWP#37
      */
-    export class RenderingManager {
-        private readonly _engine;
-        private readonly _spritesRenderer;
-        private readonly _spritesTexture;
-        private _sprites;
-        private readonly _configuration;
-        /**
-         * Creates a new instance of the RenderingManager.
-         * @param engine BABYLON.ThinEngine instance used for rendering.
-         * @param spriteTexture The texture atlas containing the sprites.
-         * @param configuration Configuration options for the rendering manager.
-         */
-        constructor(engine: BABYLON.ThinEngine, spriteTexture: BABYLON.ThinTexture, configuration: AnimationConfiguration);
-        /**
-         * Adds a sprite to the rendering manager.
-         * @param sprite Sprite to add to the rendering manager.
-         */
-        addSprite(sprite: BABYLON.ThinSprite): void;
+    export class TextRenderer implements BABYLON.IDisposable {
+        private readonly _useVAO;
+        private _engine;
+        private _shaderLanguage;
+        private _vertexBuffers;
+        private _spriteBuffer;
+        private _worldBuffer;
+        private _uvBuffer;
+        private _drawWrapperBase;
+        private _vertexArrayObject;
+        private _font;
+        private _charMatrices;
+        private _charUvs;
+        private _isDirty;
+        private _baseLine;
+        private _scalingMatrix;
+        private _fontScaleMatrix;
+        private _offsetMatrix;
+        private _translationMatrix;
+        private _baseMatrix;
+        private _scaledMatrix;
+        private _localMatrix;
+        private _finalMatrix;
+        private _lineMatrix;
+        private _parentWorldMatrix;
         /**
-         * Prepares the rendering manager for rendering.
+         * Gets or sets the color of the text
          */
-        ready(): void;
+        color: BABYLON.IColor4Like;
         /**
-         * Renders all the sprites in the rendering manager.
-         * @param worldMatrix World matrix to apply to the sprites.
-         * @param projectionMatrix Projection matrix to apply to the sprites.
+         * Gets or sets the color of the stroke around the text
          */
-        render(worldMatrix: ThinMatrix, projectionMatrix: ThinMatrix): void;
+        strokeColor: BABYLON.IColor4Like;
         /**
-         * Disposes the rendering manager and its resources.
+         * Gets or sets the width of the stroke around the text (inset)
          */
-        dispose(): void;
-        private _customSpriteUpdate;
-    }
-
-
-    /**
-     * Represents a node in the scenegraph that contains the animation information from a lottie animation layer or group.
-     */
-    export class Node {
-        private readonly _id;
-        private readonly _ignoreOpacityAnimations;
-        private readonly _position;
-        private readonly _rotation;
-        private readonly _scale;
-        private _worldMatrix;
-        private _localMatrix;
-        private _globalMatrix;
-        private readonly _opacity;
-        private readonly _parent;
-        private readonly _children;
-        private _isVisible;
-        private _isAnimated;
-        private _animationsFunctions;
-        protected _isControl: boolean;
-        protected _isShape: boolean;
+        strokeInsetWidth: number;
         /**
-         * Gets the id of this node.
-         * @returns The unique identifier of this node.
+         * Gets or sets the width of the stroke around the text (outset)
          */
-        get id(): string;
+        strokeOutsetWidth: number;
         /**
-         * Gets the childer of this node.
-         * @returns An array of child nodes.
+         * Gets or sets the thickness of the text (0 means as defined in the font)
+         * Value must be between -0.5 and 0.5
          */
-        get children(): Node[];
+        thicknessControl: number;
+        private _parent;
         /**
-         * Gets whether this node is a shape.
-         * @returns True if this node is a shape, false otherwise.
+         * Gets or sets the parent of the text renderer
          */
-        get isShape(): boolean;
+        get parent(): BABYLON.Nullable<INodeLike>;
+        set parent(value: BABYLON.Nullable<INodeLike>);
+        private _transformMatrix;
         /**
-         * Gets the world matrix of this node.
-         * @returns The world matrix.
+         * Gets or sets the transform matrix of the text renderer
+         * It will be applied in that order:
+         * parent x transform x paragraph world
          */
-        get worldMatrix(): ThinMatrix;
+        get transformMatrix(): BABYLON.IMatrixLike;
+        set transformMatrix(value: BABYLON.IMatrixLike);
         /**
-         * Gets whether this node is animated.
-         * @returns True if this node has animations, false otherwise.
+         * Gets or sets if the text is billboarded
          */
-        get isAnimated(): boolean;
+        isBillboard: boolean;
         /**
-         * Gets the opacity of this node.
-         * If the node is not visible, the opacity will be 0.
-         * @returns The opacity of the node, from 0 to 1.
+         * Gets or sets if the text is screen projected
+         * This will work only if the text is billboarded
          */
-        get opacity(): number;
+        isBillboardScreenProjected: boolean;
         /**
-         * Gets the initial scale of this node.
-         * @returns The initial scale.
+         * Gets the number of characters in the text renderer
          */
-        get startScale(): BABYLON.IVector2Like;
+        get characterCount(): number;
         /**
-         * Gets the parent node of this node.
-         * @returns The parent node, or undefined if this is a root node.
+         * Gets or sets if the text renderer should ignore the depth buffer
+         * Default is false
          */
-        get parent(): Node | undefined;
+        ignoreDepthBuffer: boolean;
+        private constructor();
+        private _resizeBuffers;
+        private _setShaders;
         /**
-         * Sets the node visibility.
-         * @param value The new visibility value.
+         * Add a paragraph of text to the renderer
+         * @param text define the text to add
+         * @param options define the options to use for the paragraph (optional)
+         * @param worldMatrix define the world matrix to use for the paragraph (optional)
          */
-        set isVisible(value: boolean);
+        addParagraph(text: string, options?: Partial<ParagraphOptions>, worldMatrix?: BABYLON.IMatrixLike): void;
         /**
-         * Constructs a new node.
-         * @param id Unique identifier for the node.
-         * @param ignoreOpacityAnimations If there are no animations on opacity, mark this as true to ignore and optimize CPU usage.
-         * @param position Position of the node in the scene.
-         * @param rotation Rotation of the node in degrees.
-         * @param scale Scale of the node in the scene.
-         * @param opacity Opacity of the node, from 0 to 1.
-         * @param parent Parent node in the scenegraph.
+         * Render the text using the provided view and projection matrices
+         * @param viewMatrix define the view matrix to use
+         * @param projectionMatrix define the projection matrix to use
          */
-        constructor(id: string, ignoreOpacityAnimations: boolean, position?: Vector2Property, rotation?: ScalarProperty, scale?: Vector2Property, opacity?: ScalarProperty, parent?: Node);
+        render(viewMatrix: BABYLON.IMatrixLike, projectionMatrix: BABYLON.IMatrixLike): void;
         /**
-         * Resets the node's properties to their initial values.
+         * Release associated resources
          */
-        reset(): void;
+        dispose(): void;
         /**
-         * Updates the node's properties based on the current frame of the animation.
-         * @param frame Frame number we are playing in the animation.
-         * @param isParentUpdated Whether the parent node has been updated.
-         * @param isReset Whether the node is being reset.
-         * @returns True if the node was updated, false otherwise.
+         * Creates a new TextRenderer instance asynchronously
+         * @param font define the font asset to use
+         * @param engine define the engine to use
+         * @returns a promise that resolves to the created TextRenderer instance
          */
-        update(frame: number, isParentUpdated?: boolean, isReset?: boolean): boolean;
-        private _updatePosition;
-        private _updateRotation;
-        private _updateScale;
-        private _updateOpacity;
+        static CreateTextRendererAsync(font: FontAsset, engine: BABYLON.AbstractEngine): Promise<TextRenderer>;
     }
 
 
-    /**
-     * This represents a top node of the scenegraph in a Lottie animation.
-     * Each top level layer in Lottie is represented by a control node node.
-     */
-    export class ControlNode extends Node {
-        private _inFrame;
-        private _outFrame;
-        /**
-         * Constructs a new control node.
-         * @param id Unique identifier for the node.
-         * @param ignoreOpacityAnimations If there are no animations on opacity, mark this as true to ignore and optimize CPU usage.
-         * @param inFrame Frame at which the node becomes active.
-         * @param outFrame Frame at which the node becomes inactive.
-         * @param position Position of the node in the scene.
-         * @param rotation Rotation of the node in degrees.
-         * @param scale Scale of the node in the scene.
-         * @param opacity Opacity of the node, from 0 to 1.
-         * @param parent Parent node in the scenegraph.
-         */
-        constructor(id: string, ignoreOpacityAnimations: boolean, inFrame: number, outFrame: number, position?: Vector2Property, rotation?: ScalarProperty, scale?: Vector2Property, opacity?: ScalarProperty, parent?: Node);
-        /**
-         * Updates the node's properties based on the current frame of the animation.
-         * This node will only be updated if the current frame is within the in and out range.
-         * @param frame Frame number we are playing in the animation.
-         * @param isParentUpdated Whether the parent node has been updated.
-         * @param isReset Whether the node is being reset.
-         * @returns True if the node was updated, false otherwise.
-         */
-        update(frame: number, isParentUpdated?: boolean, isReset?: boolean): boolean;
-    }
+    /** @internal */
+    export type ParagraphOptions = {
+        maxWidth: number;
+        lineHeight: number;
+        letterSpacing: number;
+        tabSize: number;
+        whiteSpace: "pre-line";
+        textAlign: "left" | "right" | "center";
+        translate: BABYLON.IVector2Like | undefined;
+    };
+    /** @internal */
+    export var DefaultParagraphOptions: ParagraphOptions;
+
+
 
 
     /**
-     * Class that controls the playing of lottie animations using Babylon.js
+     * Class representing a font asset for SDF (Signed Distance Field) rendering.
      */
-    export class AnimationController {
-        private _isReady;
-        private readonly _canvas;
-        private readonly _configuration;
-        private readonly _engine;
-        private readonly _spritePacker;
-        private _animation?;
-        private readonly _viewport;
-        private readonly _projectionMatrix;
-        private readonly _worldMatrix;
-        private _frameDuration;
-        private _currentFrame;
-        private _isPlaying;
-        private _animationFrameId;
-        private _lastFrameTime;
-        private _deltaTime;
-        private _loop;
-        private _accumulatedTime;
-        private _framesToAdvance;
-        private readonly _renderingManager;
-        /**
-         * Gets the canvas used for rendering the animation.
-         * @returns The canvas element used for rendering.
-         */
-        get view(): HTMLCanvasElement;
-        /**
-         * Gets the height of the animation in pixels.
-         * @returns The height of the animation in pixels.
-         */
-        get animationHeight(): number;
-        /**
-         * Gets the width of the animation in pixels.
-         * @returns The width of the animation in pixels.
-         */
-        get animationWidth(): number;
-        /**
-         * Creates a new instance of the Player.
-         * @param canvas The canvas element to render the animation on.
-         * @param animationJson The JSON string of the Lottie animation to be played.
-         * @param configuration The configuration for the animation player.
-         */
-        constructor(canvas: HTMLCanvasElement, animationJson: string, configuration: AnimationConfiguration);
-        /**
-         * Plays the animation.
-         * @param loop If true, the animation will loop when it reaches the end.
-         */
-        playAnimation(loop?: boolean): void;
+    export class FontAsset implements BABYLON.IDisposable {
+        private readonly _chars;
+        private readonly _charsRegex;
+        private readonly _kernings;
+        /** @internal */
+        readonly _font: SdfFont;
         /**
-         * Stops the animation playback.
+         * Gets the font scale value
          */
-        stopAnimation(): void;
+        readonly scale: number;
         /**
-         * Sets the rendering size for the engine
-         * @param width Width of the rendering canvas
-         * @param height Height of the rendering canvas
+         * Gets the list of used textures
          */
-        setSize(width: number, height: number): void;
+        readonly textures: BABYLON.Texture[];
         /**
-         * Disposes the player and releases all resources.
+         * Creates a new FontAsset instance.
+         * @param definitionData defines the font data in JSON format.
+         * @param textureUrl defines the url of the texture to use for the font.
+         * @param scene defines the hosting scene.
          */
+        constructor(definitionData: string, textureUrl: string, scene?: BABYLON.Scene);
         dispose(): void;
-        private _cleanTree;
-        private _startRenderLoop;
-        private _render;
+        private _updateFallbacks;
+        /** @internal */
+        _getChar(charCode: number): BMFontChar;
+        /** @internal */
+        _getKerning(first: number, second: number): number;
+        /** @internal */
+        _unsupportedChars(text: string): string;
     }
 
 
-    /**
-     * Represents a Babylon.js thin version of a Matrix
-     * We are only exposing what we truly need in the scope of
-     * the Lottie Renderer project preventing the dependency on the full
-     * Babylon.js math system.
-     */
-    export class ThinMatrix implements BABYLON.IMatrixLike {
-        /**
-         * Prevents global conflicts on update as shader programs are shared.
-         */
-        private static _UPDATE_FLAG_SEED;
-        /**
-         * Current update flag used to know whether a Matrix has changed since previous render or not.
-         * This helps identifying if a Matrix needs to be
-         * uploaded to a shader program.
-         */
-        updateFlag: number;
-        private readonly _data;
-        /**
-         * Creates a new ThinMatrix instance.
-         */
-        constructor();
-        /**
-         * Set the matrix values.
-         * @param m11 Value for row 1, column 1
-         * @param m12 Value for row 1, column 2
-         * @param m13 Value for row 1, column 3
-         * @param m14 Value for row 1, column 4
-         * @param m21 Value for row 2, column 1
-         * @param m22 Value for row 2, column 2
-         * @param m23 Value for row 2, column 3
-         * @param m24 Value for row 2, column 4
-         * @param m31 Value for row 3, column 1
-         * @param m32 Value for row 3, column 2
-         * @param m33 Value for row 3, column 3
-         * @param m34 Value for row 3, column 4
-         * @param m41 Value for row 4, column 1
-         * @param m42 Value for row 4, column 2
-         * @param m43 Value for row 4, column 3
-         * @param m44 Value for row 4, column 4
-         * @returns The updated ThinMatrix instance
-         */
-        setValues(m11: number, m12: number, m13: number, m14: number, m21: number, m22: number, m23: number, m24: number, m31: number, m32: number, m33: number, m34: number, m41: number, m42: number, m43: number, m44: number): ThinMatrix;
-        /**
-         * Set the matrix to an identity matrix.
-         * @returns The updated ThinMatrix instance
-         */
-        identity(): ThinMatrix;
-        /**
-         * Stores a left-handed orthographic projection into a given matrix
-         * @param left defines the viewport left coordinate
-         * @param right defines the viewport right coordinate
-         * @param bottom defines the viewport bottom coordinate
-         * @param top defines the viewport top coordinate
-         * @param znear defines the near clip plane
-         * @param zfar defines the far clip plane
-         * @returns The updated ThinMatrix instance
-         */
-        orthoOffCenterLeftHanded(left: number, right: number, bottom: number, top: number, znear: number, zfar: number): ThinMatrix;
-        /**
-         * Sets a matrix to a value composed by merging scale (vector2), rotation (roll around z) and translation (vector2)
-         * This only updates the parts of the matrix that are used for 2D transformations.
-         * @param scale defines the scale vector
-         * @param roll defines the rotation around z
-         * @param translation defines the translation vector
-         * @returns the updated ThinMatrix instance
-         */
-        compose(scale: BABYLON.IVector2Like, roll: number, translation: BABYLON.IVector2Like): ThinMatrix;
-        /**
-         * Sets the current matrix with the multiplication result of the current Matrix and the given one
-         * This only updates the parts of the matrix that are used for 2D transformations.
-         * @param other defines the second operand
-         * @param output the matrix to store the result in
-         * @returns the current matrix
-         */
-        multiplyToRef(other: ThinMatrix, output: ThinMatrix): ThinMatrix;
-        /**
-         * Returns the matrix data array.
-         * @returns The matrix data
-         */
-        asArray(): BABYLON.Tuple<number, 16>;
-        /**
-         * Decomposes the matrix into scale, rotation, and translation.
-         * @param scale Scale vector to store the scale values
-         * @param translation Translation vector to store the translation values
-         * @returns The rotation in radians
-         */
-        decompose(scale: BABYLON.IVector2Like, translation: BABYLON.IVector2Like): number;
+    /** @internal */
+    export var msdfVertexShaderWGSL: {
+        name: string;
+        shader: string;
+    };
+
+
+    /** @internal */
+    export var msdfPixelShaderWGSL: {
+        name: string;
+        shader: string;
+    };
+
+
+    /** @internal */
+    export var msdfVertexShader: {
+        name: string;
+        shader: string;
+    };
+
+
+    /** @internal */
+    export var msdfPixelShader: {
+        name: string;
+        shader: string;
+    };
+
+
+    /** @internal */
+    export class SdfTextParagraph {
+        readonly text: string;
+        readonly fontAsset: FontAsset;
+        readonly options: ParagraphOptions;
+        get lineHeight(): number;
+        readonly paragraph: string;
+        readonly lines: SdfTextLine[];
+        readonly width: number;
+        readonly height: number;
+        readonly glyphs: SdfGlyph[];
+        constructor(text: string, fontAsset: FontAsset, options?: Partial<ParagraphOptions>);
+        private _computeMetrics;
+        private _breakLines;
+        private _collapse;
+        private _wrap;
     }
 
 
-    /**
-     * Represents a bounding box for a shape in the animation.
-     */
-    export type BoundingBox = {
-        /**
-         * Height of the bounding box
-         */
-        height: number;
-        /**
-         * Width of the bounding box
-         */
+    /** @internal */
+    export type SdfTextLine = {
+        text: string;
+        glyphs: SdfGlyph[];
+        start: number;
+        end: number;
         width: number;
-        /**
-         * X coordinate of the center of the bounding box
-         */
-        centerX: number;
-        /**
-         * Y coordinate of the center of the bounding box
-         */
-        centerY: number;
     };
-    /**
-     * Calculates the bounding box for a group shape in a Lottie animation.
-     * @param rawGroup The raw group shape to calculate the bounding box for
-     * @returns The bounding box for the group shape
-     */
-    export function GetBoundingBox(rawGroup: RawGroupShape): BoundingBox;
 
 
-    /**
-     * Represents a Babylon.js thin version of a cubic bezier curve
-     * We are only exposing what we truly need in the scope of
-     * the Lottie Renderer project preventing the dependency on the full
-     * Babylon.js animation system.
-     */
-    export class BezierCurve {
-        /**
-         * X of the first control point
-         */
-        readonly x1: number;
-        /**
-         * Y of the first control point
-         */
-        readonly y1: number;
-        /**
-         * X of the second control point
-         */
-        readonly x2: number;
-        /**
-         * Y of the second control point
-         */
-        readonly y2: number;
-        private readonly _easingSteps;
-        private readonly _f0;
-        private readonly _f1;
-        private readonly _f2;
-        /**
-         * Instantiates a bezier function
-         * @see http://cubic-bezier.com/#.17,.67,.83,.67
-         * @param x1 Defines the x component of the start tangent in the bezier curve
-         * @param y1 Defines the y component of the start tangent in the bezier curve
-         * @param x2 Defines the x component of the end tangent in the bezier curve
-         * @param y2 Defines the y component of the end tangent in the bezier curve
-         * @param easingSteps Number of steps to sample the bezier curve for easing
-         */
-        constructor(x1: number | undefined, y1: number | undefined, x2: number | undefined, y2: number | undefined, easingSteps: number);
-        /**
-         * Interpolates the bezier curve at a given time
-         * @param t Defines the time to evaluate the bezier curve at, between 0 and 1
-         * @returns The interpolated value at time t
-         */
-        interpolate(t: number): number;
-    }
 
 
-    export type RawLottieAnimation = {
-        v: string;
-        fr: number;
-        ip: number;
-        op: number;
-        w: number;
-        h: number;
-        nm?: string;
-        layers: RawLottieLayer[];
-    };
-    export type RawLottieLayer = {
-        ind?: number;
-        ty: RawLayerType;
-        nm?: string;
-        parent?: number;
-        hd?: boolean;
-        sr?: number;
-        ao?: number;
-        ip?: number;
-        op?: number;
-        st?: number;
-        ct?: number;
-        ks: RawTransform;
-        shapes?: RawGraphicElement[];
-    };
-    export type RawGraphicElement = {
-        nm?: string;
-        hd?: boolean;
-        ty: RawShapeType;
-        bm?: number;
-        ix?: number;
-    };
-    export type RawGroupShape = RawGraphicElement & {
-        it?: RawGraphicElement[];
-    };
-    export type RawRectangleShape = RawGraphicElement & {
-        d: RawShapeDirection;
-        p: RawPositionProperty;
-        s: RawVectorProperty;
-        r: RawScalarProperty;
-    };
-    export type RawPathShape = RawGraphicElement & {
-        d: RawShapeDirection;
-        ks: RawBezierShapeProperty;
-    };
-    export type RawFillShape = RawGraphicElement & {
-        o: RawScalarProperty;
-        c: RawColorProperty;
-        r: RawFillRule;
-    };
-    export type RawGradientFillShape = RawGraphicElement & {
-        o: RawScalarProperty;
-        g: RawGradientsProperty;
-        s: RawPositionProperty;
-        e: RawPositionProperty;
-        t: RawGradientType;
-        h: RawScalarProperty;
-        a?: RawScalarProperty;
-        r: RawFillRule;
-    };
-    export type RawTransformShape = RawGraphicElement & {
-        a: RawPositionProperty;
-        p: RawPositionProperty;
-        r: RawScalarProperty;
-        s: RawVectorProperty;
-        o: RawScalarProperty;
-        sk: RawScalarProperty;
-        sa: RawScalarProperty;
-    };
-    export type RawTransform = {
-        a?: RawPositionProperty;
-        p?: RawPositionProperty;
-        r?: RawScalarProperty;
-        s?: RawVectorProperty;
-        o?: RawScalarProperty;
-    };
-    export type RawScalarProperty = {
-        a: RawNumberBoolean;
-        k: number | RawVectorKeyframe[];
-    };
-    export type RawVectorProperty = {
-        a: RawNumberBoolean;
-        k: number[] | RawVectorKeyframe[];
-        l: number;
-    };
-    export type RawVectorKeyframe = {
-        t: number;
-        s: number[];
-        h?: RawNumberBoolean;
-        i?: RawKeyFrameEasing;
-        o?: RawKeyFrameEasing;
-    };
-    export type RawPositionProperty = {
-        a: RawNumberBoolean;
-        k: number[] | RawPositionKeyframe[];
-        l: number;
-    };
-    export type RawPositionKeyframe = {
-        t: number;
-        h?: RawNumberBoolean;
-        i?: RawKeyFrameEasing;
-        o?: RawKeyFrameEasing;
-        s: number[];
-        ti: number[];
-        to: number[];
-    };
-    export type RawBezierShapeProperty = {
-        a: RawNumberBoolean;
-        k: RawBezier | RawBezierShapeKeyframe[];
-    };
-    export type RawBezierShapeKeyframe = {
-        t: number;
-        h?: RawNumberBoolean;
-        i?: RawKeyFrameEasing;
-        o?: RawKeyFrameEasing;
-        s: RawBezier[];
-    };
-    export type RawColorProperty = {
-        a: RawNumberBoolean;
-        k: number[] | RawColorKeyframe[];
-    };
-    export type RawColorKeyframe = {
-        t: number;
-        h?: RawNumberBoolean;
-        i?: RawKeyFrameEasing;
-        o?: RawKeyFrameEasing;
-        s: number[];
-    };
-    export type RawGradientsProperty = {
-        p: number;
-        k: RawGradientProperty;
-    };
-    export type RawGradientProperty = {
-        a: RawNumberBoolean;
-        k: number[];
+    /** @internal */
+    export type SdfGlyph = {
+        char: BMFontChar;
+        /** index of the line */
+        line: number;
+        /** position within the line */
+        position: number;
+        x: number;
+        y: number;
     };
-    export type RawKeyFrameEasing = {
-        x: number | number[];
-        y: number | number[];
+
+
+    export type SdfFontDistanceField = {
+        fieldType: "sdf" | "msdf";
+        distanceRange: number;
     };
-    export type RawBezier = {
-        c: boolean;
-        i: number[][];
-        o: number[][];
-        v: number[][];
+    export type SdfFont = BMFont & {
+        distanceField: SdfFontDistanceField;
     };
-    export type RawNumberBoolean = 0 | 1;
-    export type RawLayerType = 0 | 1 | 2 | 3 | 4 | 5 | 6;
-    export type RawShapeType = "fl" | "gf" | "gr" | "tr" | "sh" | "rc";
-    export type RawShapeDirection = 1 | 3;
-    export type RawFillRule = 1 | 2;
-    export type RawGradientType = 1 | 2;
 
 
     /**
-     * Represents a Babylon.js thin version of a Lottie animation.
+     * Holds information on how the font was generated.
      */
-    export type AnimationInfo = {
-        /**
-         * Frame number where the animation starts.
-         */
-        startFrame: number;
-        /**
-         * Frame number where the animation ends.
-         */
-        endFrame: number;
-        /**
-         * Frame rate of the animation.
-         */
-        frameRate: number;
-        /**
-         * Width of the animation in pixels
-         */
-        widthPx: number;
-        /**
-         * Height of the animation in pixels
-         */
-        heightPx: number;
+    export type BMFontInfo = {
+        /** The name of the font */
+        face: string;
+        /** The size of the font */
+        size: number;
+        /** The font is bold */
+        bold: number;
+        /** The font is italic */
+        italic: number;
+        /** The charset of the font */
+        charset: string[];
+        /** The charset is unicode  */
+        unicode: number;
+        /** The font height stretch in percentage. 100% means no stretch. */
+        stretchH: number;
+        /** Set to 1 if smoothing was turned on. */
+        smooth: number;
+        /** The supersampling level used. 1 means no supersampling was used. */
+        aa: number;
+        /** The padding for each character (up, right, down, left). */
+        padding: [number, number, number, number];
+        /** The spacing for each character (horizontal, vertical). */
+        spacing: [number, number];
         /**
-         * Nodes representing the animation
+         * The outline thickness for the characters.
+         *
+         * @remark missing in msdf-bmfont-xml
          */
-        nodes: Node[];
+        outline?: number;
     };
     /**
-     * Transform properties for a Lottie animation.
-     * Any of these properties may be animated.
+     * Holds information common to all characters.
      */
-    export type Transform = {
-        /**
-         * The anchor point of the layer, which is the point around which transformations are applied.
-         */
-        anchorPoint: Vector2Property;
-        /**
-         * The position of the layer in the animation.
-         */
-        position: Vector2Property;
-        /**
-         * The rotation of the layer in degrees.
-         */
-        rotation: ScalarProperty;
-        /**
-         * The scale of the layer in the X and Y axis.
-         */
-        scale: Vector2Property;
-        /**
-         * The opacity of the layer, represented as a scalar value.
-         */
-        opacity: ScalarProperty;
+    export type BMFontCommon = {
+        /** Distance in pixels between each line of text */
+        lineHeight: number;
+        /** The number of pixels from the absolute top of the line to the base of the characters */
+        base: number;
+        /** The width of the texture, normally used to scale the x pos of the character image */
+        scaleW: number;
+        /** The height of the texture, normally used to scale the y pos of the character image */
+        scaleH: number;
+        /** The number of pages in the font */
+        pages: number;
+        /** Set to 1 if the monochrome characters have been packed into each of the texture channels. In this case alphaChnl describes what is stored in each channel. */
+        packed: number;
+        /** Set to 0 if the channel holds the glyph data, 1 if it holds the outline, 2 if it holds the glyph and the outline, 3 if its set to zero, and 4 if its set to one. */
+        alphaChnl: number;
+        /** Set to 0 if the channel holds the glyph data, 1 if it holds the outline, 2 if it holds the glyph and the outline, 3 if its set to zero, and 4 if its set to one. */
+        redChnl: number;
+        /** Set to 0 if the channel holds the glyph data, 1 if it holds the outline, 2 if it holds the glyph and the outline, 3 if its set to zero, and 4 if its set to one. */
+        greenChnl: number;
+        /** Set to 0 if the channel holds the glyph data, 1 if it holds the outline, 2 if it holds the glyph and the outline, 3 if its set to zero, and 4 if its set to one. */
+        blueChnl: number;
     };
+    /** Name of a texture file. There is one for each page in the font. */
+    export type BMFontPages = {
+        [id: number]: string;
+    } & Array<string>;
     /**
-     * Represents a scalar that can be animated.
+     * Describes a single character in the font
      */
-    export type ScalarProperty = {
-        /**
-         * The initial value of the property at the start of the animation.
-         */
-        startValue: number;
-        /**
-         * The current value of the property during the animation.
-         */
-        currentValue: number;
-        /**
-         * An array of keyframes for the property.
-         */
-        keyframes?: ScalarKeyframe[];
-        /**
-         * The index of the current keyframe being processed in the animation.
+    export type BMFontChar = {
+        /** Character id (charCode) */
+        id: number;
+        /** Left position of the character image in the texture. */
+        x: number;
+        /** Right position of the character image in the texture */
+        y: number;
+        /** Width of the chracter image in the texture */
+        width: number;
+        /** Height of the chracter image in the texture */
+        height: number;
+        /** Horizontal offset to be applied on screen */
+        xoffset: number;
+        /** Vertical offset to be applied on screen */
+        yoffset: number;
+        /** Horizontal advance after the character */
+        xadvance: number;
+        /** Page index where the character image is found */
+        page: number;
+        /** Texture channel where the chracter image is found
+         * - 1 = blue
+         * - 2 = green
+         * - 3 = red
+         * - 8 = alpha
+         * - 15 = all channels
          */
-        currentKeyframeIndex: number;
-    };
+        chnl: number;
+    } & BMFontCharExtra;
     /**
-     * Represents a keyframe for a scalar property.
+     * additional context from msdf-bmfont-xml
      */
-    export type ScalarKeyframe = {
-        /**
-         * The value at this keyframe.
-         */
-        value: number;
-        /**
-         * The time at which this keyframe occurs in the animation, in frames.
-         */
-        time: number;
-        /**
-         * The easing function applied to the transition from this keyframe to the next one.
-         */
-        easeFunction: BezierCurve;
+    export type BMFontCharExtra = {
+        /** index of opentype.js glyph */
+        index: number;
+        /** actual character*/
+        char: string;
     };
     /**
-     * Represents a 2D vector that can be animated.
+     * The kerning information is used to adjust the distance between certain characters, e.g. some characters should be placed closer to each other than others.
      */
-    export type Vector2Property = {
-        /**
-         * The initial value at the start of the animation.
-         */
-        startValue: BABYLON.IVector2Like;
-        /**
-         * The current value during the animation.
-         */
-        currentValue: BABYLON.IVector2Like;
-        /**
-         * An array of keyframes for the property.
-         */
-        keyframes?: Vector2Keyframe[];
-        /**
-         * The index of the current keyframe being processed in the animation.
-         */
-        currentKeyframeIndex: number;
+    export type BMFontKerning = {
+        /** The first character id. */
+        first: number;
+        /** The second character id. */
+        second: number;
+        /** How much the x position should be adjusted when drawing the second character immediately following the first. */
+        amount: number;
     };
     /**
-     * Represents a keyframe for a 2D vector property.
+     * Compatible with [msdf-bmfont-xml](https://github.com/soimy/msdf-bmfont-xml)
+     * @see https://www.angelcode.com/products/bmfont/doc/file_format.html
      */
-    export type Vector2Keyframe = {
-        /**
-         * The value at this keyframe.
-         */
-        value: BABYLON.IVector2Like;
-        /**
-         * The time at which this keyframe occurs in the animation, in frames.
-         */
-        time: number;
-        /**
-         * The easing function applied to the transition from this keyframe to the next one.
-         * This is used for the first dimension of the vector.
-         */
-        easeFunction1: BezierCurve;
-        /**
-         * The easing function applied to the transition from this keyframe to the next one.
-         * This is used for the second dimension of the vector.
-         */
-        easeFunction2: BezierCurve;
+    export type BMFont = {
+        /** {@inheritDoc BMFontInfo} */
+        info: BMFontInfo;
+        /** {@inheritDoc BMFontCommon} */
+        common: BMFontCommon;
+        /** {@inheritDoc BMFontPages} */
+        pages: BMFontPages;
+        /** {@inheritDoc BMFontChar} */
+        chars: BMFontChar[];
+        /** {@inheritDoc BMFontKerning} */
+        kernings: BMFontKerning[];
     };
 
 
-    /**
-     * Parses a lottie animation file and converts it into a format that can be rendered by Babylon.js
-     * Important: not all lottie features are supported, you can call .debug() after parsing an animation to see what features were not supported.
-     */
-    export class AnimationParser {
-        private _packer;
-        private readonly _renderingManager;
-        private readonly _configuration;
-        private readonly _animationInfo;
-        private _unsupportedFeatures;
-        private _parentNodes;
-        private _rootNodes;
-        private _shape;
-        /**
-         * Get the animation information parsed from the Lottie file.
-         */
-        get animationInfo(): AnimationInfo;
-        /**
-         * Creates a new instance of the Lottie animations parser.
-         * @param packer Object that packs the sprites from the animation into a texture atlas.
-         * @param fileContentAsJsonString The content of the lottie file as a JSON string.
-         * @param configuration Configuration options for the animation parser.
-         * @param renderingManager Object that manages the rendering of the sprites in the animation.
-         */
-        constructor(packer: SpritePacker, fileContentAsJsonString: string, configuration: AnimationConfiguration, renderingManager: RenderingManager);
-        /**
-         * Logs to the console all issues that were encountered during parsing the file.
-         */
-        debug(): void;
-        private _loadFromData;
-        private _parseLayer;
-        private _parseShapes;
-        private _parseGroupShape;
-        private _parseTransform;
-        private _fromLottieScalarToBabylonScalar;
-        private _fromLottieVector2ToBabylonVector2;
-        private _calculateFinalVector;
-        private _getScaleFactor;
-        private _validatePathShape;
-        private _validateRectangleShape;
-        private _validateFillShape;
-        private _validateGradientFillShape;
-    }
-
-
     /**
      * BABYLON.Behavior for any content that can capture pointer events, i.e. bypass the Babylon pointer event handling
      * and receive pointer events directly.  It will register the capture triggers and negotiate the capture and
@@ -3224,6 +1251,20 @@ declare module ADDONS {
      * created before.
      */
     export class HtmlMeshRenderer {
+        /**
+         * Global scale factor applied to the homogeneous `w` component (m[15]) of the
+         * transformation matrix when projecting 3D objects into pixel space.
+         *
+         * This value is used to balance Babylon units against screen pixels, ensuring
+         * that HTML-mapped or screen-space objects appear with the correct relative
+         * size. Adjust with care, as changing it affects the projection scale of all
+         * transformed objects.
+         *
+         *  The default value is `0.00001`, which works well when 1 Babylon unit
+         *  corresponds to 1 meter, and the typical screen resolution is around
+         * 100 pixels per meter (i.e., 1 pixel per centimeter).
+         */
+        static PROJECTION_SCALE_FACTOR: number;
         private _containerId?;
         private _inSceneElements?;
         private _overlayElements?;