babylonjs-addons 8.22.2 → 8.23.0

package/babylonjs.addons.module.d.ts

@@ -435,704 +435,2691 @@ export type BMFont = {
 };
 
 }
-declare module "babylonjs-addons/htmlMesh/pointerEventsCaptureBehavior" {
-import { AbstractMesh } from "babylonjs/Meshes/abstractMesh";
-import { Behavior } from "babylonjs/Behaviors/behavior";
+declare module "babylonjs-addons/lottie/worker" {
+export {};
+
+}
+declare module "babylonjs-addons/lottie/lottiePlayer" {
 /**
- * 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
+ * Configuration options for the Lottie animation player.
  */
-export class PointerEventsCaptureBehavior implements Behavior<AbstractMesh> {
-    private _captureCallback;
-    private _releaseCallback;
-    /** gets or sets behavior's name */
-    name: string;
-    private _attachedMesh;
-    /** @internal */
-    _captureOnPointerEnter: boolean;
+export type AnimationConfiguration = {
     /**
-     * Gets or sets the mesh that the behavior is attached to
+     * Whether the animation should play on a loop or not
      */
-    get attachedMesh(): AbstractMesh | null;
-    set attachedMesh(value: AbstractMesh | null);
-    constructor(_captureCallback: () => void, _releaseCallback: () => void, { captureOnPointerEnter }?: {
-        captureOnPointerEnter?: boolean | undefined;
-    });
+    loopAnimation: boolean;
     /**
-     * Set if the behavior should capture pointer events when the pointer enters the mesh
+     * Size of the sprite atlas texture.
+     * Default is 2048.
      */
-    set captureOnPointerEnter(captureOnPointerEnter: boolean);
+    spriteAtlasSize: number;
     /**
-     * Function called when the behavior needs to be initialized (before attaching it to a target)
+     * Gap size around sprites in the atlas.
+     * Default is 5.
      */
-    init(): void;
+    gapSize: number;
     /**
-     * Called when the behavior is attached to a target
-     * @param mesh defines the target where the behavior is attached to
+     * Maximum number of sprites the renderer can handle at once.
+     * Default is 64.
      */
-    attach(mesh: AbstractMesh): void;
+    spritesCapacity: number;
     /**
-     * Called when the behavior is detached from its target
+     * Background color for the animation canvas.
+     * Default is white with full opacity.
      */
-    detach(): void;
+    backgroundColor: {
+        r: number;
+        g: number;
+        b: number;
+        a: number;
+    };
     /**
-     * Dispose the behavior
+     * 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;
-    releasePointerEvents(): void;
-    capturePointerEvents(): void;
+    private _onWindowResize;
+    private _onBeforeUnload;
 }
 
 }
-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;
+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";
 /**
- * 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
+ * Information about a sprite in the sprite atlas.
  */
-export const requestRelease: (requestId: string | null) => void;
+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;
+};
 /**
- * Release pointer events from the current owner
+ * SpritePacker is a class that handles the packing of sprites into a texture atlas.
  */
-export const releaseCurrent: () => void;
-global {
-    interface Window {
-        "pointer-events-capture-debug": boolean | null;
-    }
-}
-export {};
-
+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/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;
+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";
 /**
- * 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.
+ * Represents a sprite in the scene graph.
  */
-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;
+export class SpriteNode extends Node {
+    private _sprite;
+    private _originalWidth;
+    private _originalHeight;
+    private _firstTime;
     /**
-     * Contruct an instance of HtmlMeshRenderer
-     * @param scene
-     * @param options object containing the following optional properties:
-     * @returns
+     * 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(scene: Scene, { parentContainerId, _containerId, enableOverlayRender, defaultOpaqueRenderOrder, defaultAlphaTestRenderOrder, defaultTransparentRenderOrder, }?: {
-        parentContainerId?: string | null;
-        _containerId?: string;
-        defaultOpaqueRenderOrder?: RenderOrderFunction;
-        defaultAlphaTestRenderOrder?: RenderOrderFunction;
-        defaultTransparentRenderOrder?: RenderOrderFunction;
-        enableOverlayRender?: boolean;
-    });
+    constructor(id: string, ignoreOpacityAnimations: boolean, sprite: ThinSprite, position?: Vector2Property, rotation?: ScalarProperty, scale?: Vector2Property, opacity?: ScalarProperty, parent?: Node);
     /**
-     * Dispose of the HtmlMeshRenderer
+     * 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.
      */
-    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;
+    update(frame: number, isParentUpdated?: boolean, isReset?: boolean): boolean;
 }
-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";
+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";
 /**
- * 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
+ * Represents all the sprites from the animation and manages their rendering.
  */
-export class HtmlMesh extends Mesh {
+export class RenderingManager {
+    private readonly _engine;
+    private readonly _spritesRenderer;
+    private readonly _spritesTexture;
+    private _sprites;
+    private readonly _configuration;
     /**
-     * Helps identifying a html mesh from a regular mesh
+     * 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.
      */
-    get isHtmlMesh(): boolean;
-    private _enabled;
-    private _ready;
+    constructor(engine: ThinEngine, spriteTexture: ThinTexture, configuration: AnimationConfiguration);
     /**
-     * @internal
+     * Adds a sprite to the rendering manager.
+     * @param sprite Sprite to add to the rendering manager.
      */
-    _isCanvasOverlay: boolean;
-    private _requiresUpdate;
-    private _element?;
-    private _width?;
-    private _height?;
-    private _inverseScaleMatrix;
-    private _captureOnPointerEnter;
-    private _pointerEventCaptureBehavior;
-    private _sourceWidth;
-    private _sourceHeight;
+    addSprite(sprite: ThinSprite): void;
     /**
-     * Return the source width of the content in pixels
+     * Prepares the rendering manager for rendering.
      */
-    get sourceWidth(): number | null;
+    ready(): void;
     /**
-     * Return the source height of the content in pixels
+     * 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.
      */
-    get sourceHeight(): number | null;
-    private _worldMatrixUpdateObserver;
-    private _fitStrategy;
+    render(worldMatrix: ThinMatrix, projectionMatrix: ThinMatrix): void;
     /**
-     * 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
+     * Disposes the rendering manager and its resources.
      */
-    constructor(scene: Scene, id: string, { captureOnPointerEnter, isCanvasOverlay, fitStrategy }?: {
-        captureOnPointerEnter?: boolean | undefined;
-        isCanvasOverlay?: boolean | undefined;
-        fitStrategy?: FitStrategyType | undefined;
-    });
+    dispose(): void;
+    private _customSpriteUpdate;
+}
+
+}
+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";
+/**
+ * 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;
     /**
-     * The width of the content in pixels
+     * Gets the id of this node.
+     * @returns The unique identifier of this node.
      */
-    get width(): number | undefined;
+    get id(): string;
     /**
-     * The height of the content in pixels
+     * Gets the childer of this node.
+     * @returns An array of child nodes.
      */
-    get height(): number | undefined;
+    get children(): Node[];
     /**
-     * The HTML element that is being rendered as a mesh
+     * Gets whether this node is a shape.
+     * @returns True if this node is a shape, false otherwise.
      */
-    get element(): HTMLElement | undefined;
+    get isShape(): boolean;
     /**
-     * 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.
+     * Gets the world matrix of this node.
+     * @returns The world matrix.
      */
-    get requiresUpdate(): boolean;
+    get worldMatrix(): ThinMatrix;
     /**
-     * Enable capture for the pointer when entering the mesh area
+     * Gets whether this node is animated.
+     * @returns True if this node has animations, false otherwise.
      */
-    set captureOnPointerEnter(captureOnPointerEnter: boolean);
+    get isAnimated(): boolean;
     /**
-     * Disposes of the mesh and the HTML element
+     * 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.
      */
-    dispose(): void;
+    get opacity(): number;
     /**
-     * @internal
+     * Gets the initial scale of this node.
+     * @returns The initial scale.
      */
-    _markAsUpdated(): void;
+    get startScale(): IVector2Like;
     /**
-     * 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
+     * Gets the parent node of this node.
+     * @returns The parent node, or undefined if this is a root node.
      */
-    setContent(element: HTMLElement, width: number, height: number): void;
-    setEnabled(enabled: boolean): void;
+    get parent(): Node | undefined;
     /**
-     * Sets the content size in pixels
-     * @param width width of the source
-     * @param height height of the source
+     * Sets the node visibility.
+     * @param value The new visibility value.
      */
-    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;
+    set isVisible(value: boolean);
     /**
-     * Callback used by the PointerEventsCaptureBehavior to capture pointer events
+     * 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.
      */
-    capturePointerEvents(): void;
+    constructor(id: string, ignoreOpacityAnimations: boolean, position?: Vector2Property, rotation?: ScalarProperty, scale?: Vector2Property, opacity?: ScalarProperty, parent?: Node);
     /**
-     * Callback used by the PointerEventsCaptureBehavior to release pointer events
+     * Resets the node's properties to their initial values.
      */
-    releasePointerEvents(): void;
-    protected _createElement(): HTMLDivElement | undefined;
+    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/htmlMesh/fitStrategy" {
-export type FitStrategyType = {
-    wrapElement(element: HTMLElement): HTMLElement;
-    updateSize(sizingElement: HTMLElement, width: number, height: number): void;
+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.
+     */
+    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;
 };
-export const FitStrategy: {
-    CONTAIN: FitStrategyType;
-    COVER: FitStrategyType;
-    STRETCH: FitStrategyType;
-    NONE: FitStrategyType;
+/**
+ * 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.
+     */
+    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;
+};
+
+}
+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;
+    /**
+     * 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;
+}
+
+}
+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;
+}
+
+}
+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;
+    }
 
-}
 
-declare module "babylonjs-addons" {
-    export * from "babylonjs-addons/index";
-}
 
 
-declare module ADDONS {
+    /**
+     * 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;
+    }
 
 
     /**
-     * Abstract Node class from Babylon.js
+     * Represents a sprite in the scene graph.
      */
-    export interface INodeLike {
-        getWorldMatrix(): BABYLON.IMatrixLike;
+    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;
     }
+
+
     /**
-     * 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
+     * Represents all the sprites from the animation and manages their rendering.
      */
-    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;
+    export class RenderingManager {
+        private readonly _engine;
+        private readonly _spritesRenderer;
+        private readonly _spritesTexture;
+        private _sprites;
+        private readonly _configuration;
         /**
-         * Gets or sets the color of the text
+         * 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.
          */
-        color: BABYLON.IColor4Like;
+        constructor(engine: BABYLON.ThinEngine, spriteTexture: BABYLON.ThinTexture, configuration: AnimationConfiguration);
         /**
-         * Gets or sets the color of the stroke around the text
+         * Adds a sprite to the rendering manager.
+         * @param sprite Sprite to add to the rendering manager.
          */
-        strokeColor: BABYLON.IColor4Like;
+        addSprite(sprite: BABYLON.ThinSprite): void;
         /**
-         * Gets or sets the width of the stroke around the text (inset)
+         * Prepares the rendering manager for rendering.
          */
-        strokeInsetWidth: number;
+        ready(): void;
         /**
-         * Gets or sets the width of the stroke around the text (outset)
+         * 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.
          */
-        strokeOutsetWidth: number;
+        render(worldMatrix: ThinMatrix, projectionMatrix: ThinMatrix): void;
         /**
-         * Gets or sets the thickness of the text (0 means as defined in the font)
-         * Value must be between -0.5 and 0.5
+         * Disposes the rendering manager and its resources.
          */
-        thicknessControl: number;
-        private _parent;
+        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;
         /**
-         * Gets or sets the parent of the text renderer
+         * Gets the id of this node.
+         * @returns The unique identifier of this node.
          */
-        get parent(): BABYLON.Nullable<INodeLike>;
-        set parent(value: BABYLON.Nullable<INodeLike>);
-        private _transformMatrix;
+        get id(): string;
         /**
-         * Gets or sets the transform matrix of the text renderer
-         * It will be applied in that order:
-         * parent x transform x paragraph world
+         * Gets the childer of this node.
+         * @returns An array of child nodes.
          */
-        get transformMatrix(): BABYLON.IMatrixLike;
-        set transformMatrix(value: BABYLON.IMatrixLike);
+        get children(): Node[];
         /**
-         * Gets or sets if the text is billboarded
+         * Gets whether this node is a shape.
+         * @returns True if this node is a shape, false otherwise.
          */
-        isBillboard: boolean;
+        get isShape(): boolean;
         /**
-         * Gets or sets if the text is screen projected
-         * This will work only if the text is billboarded
+         * Gets the world matrix of this node.
+         * @returns The world matrix.
          */
-        isBillboardScreenProjected: boolean;
+        get worldMatrix(): ThinMatrix;
         /**
-         * Gets the number of characters in the text renderer
+         * Gets whether this node is animated.
+         * @returns True if this node has animations, false otherwise.
          */
-        get characterCount(): number;
+        get isAnimated(): boolean;
         /**
-         * Gets or sets if the text renderer should ignore the depth buffer
-         * Default is false
+         * 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.
          */
-        ignoreDepthBuffer: boolean;
-        private constructor();
-        private _resizeBuffers;
-        private _setShaders;
+        get opacity(): number;
         /**
-         * 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)
+         * Gets the initial scale of this node.
+         * @returns The initial scale.
          */
-        addParagraph(text: string, options?: Partial<ParagraphOptions>, worldMatrix?: BABYLON.IMatrixLike): void;
+        get startScale(): BABYLON.IVector2Like;
         /**
-         * 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
+         * Gets the parent node of this node.
+         * @returns The parent node, or undefined if this is a root node.
          */
-        render(viewMatrix: BABYLON.IMatrixLike, projectionMatrix: BABYLON.IMatrixLike): void;
+        get parent(): Node | undefined;
         /**
-         * Release associated resources
+         * Sets the node visibility.
+         * @param value The new visibility value.
          */
-        dispose(): void;
+        set isVisible(value: boolean);
         /**
-         * 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
+         * 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.
          */
-        static CreateTextRendererAsync(font: FontAsset, engine: BABYLON.AbstractEngine): Promise<TextRenderer>;
+        constructor(id: string, ignoreOpacityAnimations: boolean, position?: Vector2Property, rotation?: ScalarProperty, scale?: Vector2Property, opacity?: ScalarProperty, parent?: Node);
+        /**
+         * 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;
     }
 
 
-    /** @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;
-
-
+    /**
+     * 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;
+    }
 
 
     /**
-     * Class representing a font asset for SDF (Signed Distance Field) rendering.
+     * Class that controls the playing of lottie animations using Babylon.js
      */
-    export class FontAsset implements BABYLON.IDisposable {
-        private readonly _chars;
-        private readonly _charsRegex;
-        private readonly _kernings;
-        /** @internal */
-        readonly _font: SdfFont;
+    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 font scale value
+         * Gets the canvas used for rendering the animation.
+         * @returns The canvas element used for rendering.
          */
-        readonly scale: number;
+        get view(): HTMLCanvasElement;
         /**
-         * Gets the list of used textures
+         * Gets the height of the animation in pixels.
+         * @returns The height of the animation in pixels.
          */
-        readonly textures: BABYLON.Texture[];
+        get animationHeight(): number;
         /**
-         * 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.
+         * 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.
          */
-        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;
+        private _cleanTree;
+        private _startRenderLoop;
+        private _render;
     }
 
 
-    /** @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 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 type SdfTextLine = {
-        text: string;
-        glyphs: SdfGlyph[];
-        start: number;
-        end: number;
+    /**
+     * 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;
 
 
+    /**
+     * 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;
+    }
 
 
-    /** @internal */
-    export type SdfGlyph = {
-        char: BMFontChar;
-        /** index of the line */
-        line: number;
-        /** position within the line */
-        position: number;
-        x: number;
-        y: number;
+    export type RawLottieAnimation = {
+        v: string;
+        fr: number;
+        ip: number;
+        op: number;
+        w: number;
+        h: number;
+        nm?: string;
+        layers: RawLottieLayer[];
     };
-
-
-    export type SdfFontDistanceField = {
-        fieldType: "sdf" | "msdf";
-        distanceRange: number;
+    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 SdfFont = BMFont & {
-        distanceField: SdfFontDistanceField;
+    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;
 
 
     /**
-     * Holds information on how the font was generated.
+     * Represents a Babylon.js thin version of a Lottie animation.
      */
-    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];
+    export type AnimationInfo = {
         /**
-         * The outline thickness for the characters.
-         *
-         * @remark missing in msdf-bmfont-xml
+         * Frame number where the animation starts.
          */
-        outline?: number;
+        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[];
     };
     /**
-     * Holds information common to all characters.
+     * Transform properties for a Lottie animation.
+     * Any of these properties may be animated.
      */
-    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;
+    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;
     };
-    /** 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
+     * Represents a scalar that can be animated.
      */
-    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
+    export type ScalarProperty = {
+        /**
+         * The initial value of the property at the start of the animation.
          */
-        chnl: number;
-    } & BMFontCharExtra;
+        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;
+    };
     /**
-     * additional context from msdf-bmfont-xml
+     * Represents a keyframe for a scalar property.
      */
-    export type BMFontCharExtra = {
-        /** index of opentype.js glyph */
-        index: number;
-        /** actual character*/
-        char: string;
+    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;
     };
     /**
-     * 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.
+     * Represents a 2D vector that can be animated.
      */
-    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;
+    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;
     };
     /**
-     * Compatible with [msdf-bmfont-xml](https://github.com/soimy/msdf-bmfont-xml)
-     * @see https://www.angelcode.com/products/bmfont/doc/file_format.html
+     * Represents a keyframe for a 2D vector property.
      */
-    export type BMFont = {
-        /** {@inheritDoc BMFontInfo} */
-        info: BMFontInfo;
-        /** {@inheritDoc BMFontCommon} */
-        common: BMFontCommon;
-        /** {@inheritDoc BMFontPages} */
-        pages: BMFontPages;
-        /** {@inheritDoc BMFontChar} */
-        chars: BMFontChar[];
-        /** {@inheritDoc BMFontKerning} */
-        kernings: BMFontKerning[];
+    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;
     };
 
 
+    /**
+     * 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