babylonjs-addons 8.6.2 → 8.7.1

package/138.js

@@ -0,0 +1,2 @@
+"use strict";(("undefined"!=typeof self?self:"undefined"!=typeof global?global:this).webpackChunkADDONS=("undefined"!=typeof self?self:"undefined"!=typeof global?global:this).webpackChunkADDONS||[]).push([[138],{138:(e,n,t)=>{t.r(n),t.d(n,{msdfFragmentShader:()=>f});var f={name:"msdfFragmentShader",shader:"\nvar fontAtlas: texture_2d<f32>;\nvar fontAtlasSampler: sampler;\nuniform unitRange: vec2f;\nuniform texelSize: vec2f;\nuniform uColor: vec4f;\nuniform thickness: f32;\n\nvarying atlasUV: vec2f;\n\nfn median(msdf: vec3<f32>) -> f32 {\n    let a = min(msdf.r, msdf.g);\n    let b = max(msdf.r, msdf.g);\n    return max(a, min(b, msdf.b));\n}\n\n@fragment\nfn main(input: FragmentInputs) -> FragmentOutputs {\n    let uv = input.atlasUV;\n\n    // Sample center and neighbors\n    let sdfCenter = textureSample(fontAtlas, fontAtlasSampler, uv).rgb;\n    let sdfLeft   = textureSample(fontAtlas, fontAtlasSampler, uv - vec2<f32>(uniforms.texelSize.x, 0.0)).rgb;\n    let sdfRight  = textureSample(fontAtlas, fontAtlasSampler, uv + vec2<f32>(uniforms.texelSize.x, 0.0)).rgb;\n    let sdfTop    = textureSample(fontAtlas, fontAtlasSampler, uv - vec2<f32>(0.0, uniforms.texelSize.y)).rgb;\n    let sdfBottom = textureSample(fontAtlas, fontAtlasSampler, uv + vec2<f32>(0.0, uniforms.texelSize.y)).rgb;\n\n    let sdf = (sdfCenter + sdfLeft + sdfRight + sdfTop + sdfBottom) / 5.0;\n\n    let dist = median(sdfCenter);\n\n    // Estimate pixel range in screen space\n    let dx = dpdx(uv);\n    let dy = dpdy(uv);\n    let screenTexSize = vec2<f32>(1.0) / vec2<f32>(length(dx), length(dy));\n    let pxRange = max(0.5 * dot(uniforms.unitRange, screenTexSize), 1.0);\n\n    let pxDist = pxRange * (dist - 0.5 + uniforms.thickness);\n    let alpha = clamp(pxDist / length(dpdx(pxDist)) + 0.5, 0.0, 1.0);\n\n    fragmentOutputs.color = vec4<f32>(uniforms.uColor.rgb, alpha * uniforms.uColor.a);\n}"}}}]);
+//# sourceMappingURL=138.js.map

package/138.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"138.js","mappings":"2QACA,IA6CaA,EAAqB,CAAEC,KA7CvB,qBA6C6BC,OA5C3B,qjD","sources":["webpack://ADDONS/../../../dev/addons/src/msdfText/webgpu/fragment.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/naming-convention */\r\nconst name = \"msdfFragmentShader\";\r\nconst shader = `\r\nvar fontAtlas: texture_2d<f32>;\r\nvar fontAtlasSampler: sampler;\r\nuniform unitRange: vec2f;\r\nuniform texelSize: vec2f;\r\nuniform uColor: vec4f;\r\nuniform thickness: f32;\r\n\r\nvarying atlasUV: vec2f;\r\n\r\nfn median(msdf: vec3<f32>) -> f32 {\r\n    let a = min(msdf.r, msdf.g);\r\n    let b = max(msdf.r, msdf.g);\r\n    return max(a, min(b, msdf.b));\r\n}\r\n\r\n@fragment\r\nfn main(input: FragmentInputs) -> FragmentOutputs {\r\n    let uv = input.atlasUV;\r\n\r\n    // Sample center and neighbors\r\n    let sdfCenter = textureSample(fontAtlas, fontAtlasSampler, uv).rgb;\r\n    let sdfLeft   = textureSample(fontAtlas, fontAtlasSampler, uv - vec2<f32>(uniforms.texelSize.x, 0.0)).rgb;\r\n    let sdfRight  = textureSample(fontAtlas, fontAtlasSampler, uv + vec2<f32>(uniforms.texelSize.x, 0.0)).rgb;\r\n    let sdfTop    = textureSample(fontAtlas, fontAtlasSampler, uv - vec2<f32>(0.0, uniforms.texelSize.y)).rgb;\r\n    let sdfBottom = textureSample(fontAtlas, fontAtlasSampler, uv + vec2<f32>(0.0, uniforms.texelSize.y)).rgb;\r\n\r\n    let sdf = (sdfCenter + sdfLeft + sdfRight + sdfTop + sdfBottom) / 5.0;\r\n\r\n    let dist = median(sdfCenter);\r\n\r\n    // Estimate pixel range in screen space\r\n    let dx = dpdx(uv);\r\n    let dy = dpdy(uv);\r\n    let screenTexSize = vec2<f32>(1.0) / vec2<f32>(length(dx), length(dy));\r\n    let pxRange = max(0.5 * dot(uniforms.unitRange, screenTexSize), 1.0);\r\n\r\n    let pxDist = pxRange * (dist - 0.5 + uniforms.thickness);\r\n    let alpha = clamp(pxDist / length(dpdx(pxDist)) + 0.5, 0.0, 1.0);\r\n\r\n    fragmentOutputs.color = vec4<f32>(uniforms.uColor.rgb, alpha * uniforms.uColor.a);\r\n}`;\r\n\r\n/** @internal */\r\nexport const msdfFragmentShader = { name, shader };\r\n"],"names":["msdfFragmentShader","name","shader"],"sourceRoot":""}

package/205.js

@@ -0,0 +1,2 @@
+"use strict";(("undefined"!=typeof self?self:"undefined"!=typeof global?global:this).webpackChunkADDONS=("undefined"!=typeof self?self:"undefined"!=typeof global?global:this).webpackChunkADDONS||[]).push([[205],{205:(e,n,t)=>{t.r(n),t.d(n,{msdfFragmentShader:()=>a});var a={name:"msdfFragmentShader",shader:"\n#extension GL_OES_standard_derivatives : enable\n\nprecision highp float;\n\nuniform sampler2D fontAtlas;\nuniform vec2 unitRange;\nuniform vec2 texelSize;\nuniform vec4 uColor;\nuniform float thickness;\n\nvarying vec2 atlasUV;\n\nfloat median(vec3 msdf) {\n    return max(min(msdf.r, msdf.g), min(max(msdf.r, msdf.g), msdf.b));\n}\n  \nfloat screenPxRange(sampler2D tex) {\n    vec2 screenTexSize = vec2(1.0) / fwidth(atlasUV);\n    return max(0.5 * dot(unitRange, screenTexSize), 1.0);\n}\n\nvoid main(void)\n{\n    vec3 sdfCenter = texture2D(fontAtlas, atlasUV).rgb;\n    vec3 sdfLeft = texture2D(fontAtlas, atlasUV - vec2(texelSize.x, 0.0)).rgb;\n    vec3 sdfRight = texture2D(fontAtlas, atlasUV + vec2(texelSize.x, 0.0)).rgb;\n    vec3 sdfTop = texture2D(fontAtlas, atlasUV - vec2(0.0, texelSize.y)).rgb;\n    vec3 sdfBottom = texture2D(fontAtlas, atlasUV + vec2(0.0, texelSize.y)).rgb;\n\n    vec3 sdf = (sdfCenter + sdfLeft + sdfRight + sdfTop + sdfBottom) / 5.0;\n\n    float dist = median(sdfCenter);\n\n    float pxRange = screenPxRange(fontAtlas);\n    float pxDist = pxRange * (dist - 0.5 + thickness);\n    float alpha = clamp(pxDist / fwidth(pxDist) + 0.5, 0.0, 1.0);\n\n    gl_FragColor = vec4(uColor.rgb, alpha * uColor.a);\n}"}}}]);
+//# sourceMappingURL=205.js.map

package/205.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"205.js","mappings":"2QACA,IA2CaA,EAAqB,CAAEC,KA3CvB,qBA2C6BC,OA1C3B,guC","sources":["webpack://ADDONS/../../../dev/addons/src/msdfText/webgl/fragment.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/naming-convention */\r\nconst name = \"msdfFragmentShader\";\r\nconst shader = `\r\n#extension GL_OES_standard_derivatives : enable\r\n\r\nprecision highp float;\r\n\r\nuniform sampler2D fontAtlas;\r\nuniform vec2 unitRange;\r\nuniform vec2 texelSize;\r\nuniform vec4 uColor;\r\nuniform float thickness;\r\n\r\nvarying vec2 atlasUV;\r\n\r\nfloat median(vec3 msdf) {\r\n    return max(min(msdf.r, msdf.g), min(max(msdf.r, msdf.g), msdf.b));\r\n}\r\n  \r\nfloat screenPxRange(sampler2D tex) {\r\n    vec2 screenTexSize = vec2(1.0) / fwidth(atlasUV);\r\n    return max(0.5 * dot(unitRange, screenTexSize), 1.0);\r\n}\r\n\r\nvoid main(void)\r\n{\r\n    vec3 sdfCenter = texture2D(fontAtlas, atlasUV).rgb;\r\n    vec3 sdfLeft = texture2D(fontAtlas, atlasUV - vec2(texelSize.x, 0.0)).rgb;\r\n    vec3 sdfRight = texture2D(fontAtlas, atlasUV + vec2(texelSize.x, 0.0)).rgb;\r\n    vec3 sdfTop = texture2D(fontAtlas, atlasUV - vec2(0.0, texelSize.y)).rgb;\r\n    vec3 sdfBottom = texture2D(fontAtlas, atlasUV + vec2(0.0, texelSize.y)).rgb;\r\n\r\n    vec3 sdf = (sdfCenter + sdfLeft + sdfRight + sdfTop + sdfBottom) / 5.0;\r\n\r\n    float dist = median(sdfCenter);\r\n\r\n    float pxRange = screenPxRange(fontAtlas);\r\n    float pxDist = pxRange * (dist - 0.5 + thickness);\r\n    float alpha = clamp(pxDist / fwidth(pxDist) + 0.5, 0.0, 1.0);\r\n\r\n    gl_FragColor = vec4(uColor.rgb, alpha * uColor.a);\r\n}`;\r\n\r\n/** @internal */\r\nexport const msdfFragmentShader = { name, shader };\r\n"],"names":["msdfFragmentShader","name","shader"],"sourceRoot":""}

package/315.js

@@ -0,0 +1,2 @@
+"use strict";(("undefined"!=typeof self?self:"undefined"!=typeof global?global:this).webpackChunkADDONS=("undefined"!=typeof self?self:"undefined"!=typeof global?global:this).webpackChunkADDONS||[]).push([[315],{315:(e,t,n)=>{n.r(t),n.d(t,{msdfVertexShader:()=>o});var o={name:"msdfVertexShader",shader:"\nattribute vec2 offsets;\nattribute vec4 world0;\nattribute vec4 world1;\nattribute vec4 world2;\nattribute vec4 world3;\nattribute vec4 uvs;\n\nuniform mat4 parentWorld;\nuniform mat4 view;\nuniform mat4 projection;\n\nvarying vec2 atlasUV;\n\nvoid main(void) {\n    mat4 world = mat4(world0, world1, world2, world3);\n    vec3 viewPos = (view * parentWorld * world *  vec4(offsets.xy - vec2(0.5, 0.5), 0., 1.0)).xyz; \n    gl_Position = projection * vec4(viewPos,1.0); \n    atlasUV = vec2(uvs.x + offsets.x * uvs.z, uvs.y + (1.0 - offsets.y) * uvs.w);\n}"}}}]);
+//# sourceMappingURL=315.js.map

package/315.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"315.js","mappings":"yQACA,IAuBaA,EAAmB,CAAEC,KAvBrB,mBAuB2BC,OAtBzB,ijB","sources":["webpack://ADDONS/../../../dev/addons/src/msdfText/webgl/vertex.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/naming-convention */\r\nconst name = \"msdfVertexShader\";\r\nconst shader = `\r\nattribute vec2 offsets;\r\nattribute vec4 world0;\r\nattribute vec4 world1;\r\nattribute vec4 world2;\r\nattribute vec4 world3;\r\nattribute vec4 uvs;\r\n\r\nuniform mat4 parentWorld;\r\nuniform mat4 view;\r\nuniform mat4 projection;\r\n\r\nvarying vec2 atlasUV;\r\n\r\nvoid main(void) {\r\n    mat4 world = mat4(world0, world1, world2, world3);\r\n    vec3 viewPos = (view * parentWorld * world *  vec4(offsets.xy - vec2(0.5, 0.5), 0., 1.0)).xyz; \r\n    gl_Position = projection * vec4(viewPos,1.0); \r\n    atlasUV = vec2(uvs.x + offsets.x * uvs.z, uvs.y + (1.0 - offsets.y) * uvs.w);\r\n}`;\r\n\r\n/** @internal */\r\nexport const msdfVertexShader = { name, shader };\r\n"],"names":["msdfVertexShader","name","shader"],"sourceRoot":""}

package/372.js

@@ -0,0 +1,2 @@
+"use strict";(("undefined"!=typeof self?self:"undefined"!=typeof global?global:this).webpackChunkADDONS=("undefined"!=typeof self?self:"undefined"!=typeof global?global:this).webpackChunkADDONS||[]).push([[372],{372:(t,e,n)=>{n.r(e),n.d(e,{msdfVertexShader:()=>f});var f={name:"msdfVertexShader",shader:"\nattribute offsets: vec2f;\nattribute world0: vec4f;\nattribute world1: vec4f;\nattribute world2: vec4f;\nattribute world3: vec4f;\nattribute uvs: vec4f;\n\nuniform parentWorld: mat4x4f;\nuniform view: mat4x4f;\nuniform projection: mat4x4f;\n\nvarying atlasUV: vec2f;\n\n@vertex\nfn main(input: VertexInputs) -> FragmentInputs {\n    let world = mat4x4<f32>(input.world0, input.world1, input.world2, input.world3);\n    let localOffset = vec4<f32>(input.offsets - vec2<f32>(0.5, 0.5), 0.0, 1.0);\n    let viewPos = (uniforms.view * uniforms.parentWorld * world * localOffset).xyz;\n    vertexOutputs.position = uniforms.projection * vec4<f32>(viewPos, 1.0);\n\n    vertexOutputs.atlasUV = vec2<f32>(\n        input.uvs.x + input.offsets.x * input.uvs.z,\n        input.uvs.y + (1.0 - input.offsets.y) * input.uvs.w\n    );\n}"}}}]);
+//# sourceMappingURL=372.js.map

package/372.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"372.js","mappings":"yQACA,IA6BaA,EAAmB,CAAEC,KA7BrB,mBA6B2BC,OA5BzB,6zB","sources":["webpack://ADDONS/../../../dev/addons/src/msdfText/webgpu/vertex.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/naming-convention */\r\nconst name = \"msdfVertexShader\";\r\nconst shader = `\r\nattribute offsets: vec2f;\r\nattribute world0: vec4f;\r\nattribute world1: vec4f;\r\nattribute world2: vec4f;\r\nattribute world3: vec4f;\r\nattribute uvs: vec4f;\r\n\r\nuniform parentWorld: mat4x4f;\r\nuniform view: mat4x4f;\r\nuniform projection: mat4x4f;\r\n\r\nvarying atlasUV: vec2f;\r\n\r\n@vertex\r\nfn main(input: VertexInputs) -> FragmentInputs {\r\n    let world = mat4x4<f32>(input.world0, input.world1, input.world2, input.world3);\r\n    let localOffset = vec4<f32>(input.offsets - vec2<f32>(0.5, 0.5), 0.0, 1.0);\r\n    let viewPos = (uniforms.view * uniforms.parentWorld * world * localOffset).xyz;\r\n    vertexOutputs.position = uniforms.projection * vec4<f32>(viewPos, 1.0);\r\n\r\n    vertexOutputs.atlasUV = vec2<f32>(\r\n        input.uvs.x + input.offsets.x * input.uvs.z,\r\n        input.uvs.y + (1.0 - input.offsets.y) * input.uvs.w\r\n    );\r\n}`;\r\n\r\n/** @internal */\r\nexport const msdfVertexShader = { name, shader };\r\n"],"names":["msdfVertexShader","name","shader"],"sourceRoot":""}

package/babylonjs.addons.d.ts

@@ -2,6 +2,358 @@
 declare module ADDONS {
 
 
+    /**
+     * Abstract Node class from Babylon.js
+     */
+    export interface INodeLike {
+        getWorldMatrix(): BABYLON.ThinMatrix;
+    }
+    /**
+     * 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
+     */
+    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;
+        private _storedTranslation;
+        /**
+         * Gets or sets the color of the text
+         */
+        color: BABYLON.IColor4Like;
+        /**
+         * 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>);
+        /**
+         * Gets or sets if the text is billboarded
+         */
+        isBillboard: boolean;
+        /**
+         * Gets the number of characters in the text renderer
+         */
+        get characterCount(): number;
+        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.Vector2 | undefined;
+    };
+    /** @internal */
+    export var DefaultParagraphOptions: ParagraphOptions;
+
+
+
+
+    /**
+     * Class representing a font asset for SDF (Signed Distance Field) rendering.
+     */
+    export class FontAsset {
+        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.
+         */
+        constructor(definitionData: string, textureUrl: string);
+        private _updateFallbacks;
+        /** @internal */
+        _getChar(charCode: number): BMFontChar;
+        /** @internal */
+        _getKerning(first: number, second: number): number;
+        /** @internal */
+        _unsupportedChars(text: string): string;
+    }
+
+
+    /** @internal */
+    export var msdfVertexShader: {
+        name: string;
+        shader: string;
+    };
+
+
+    /** @internal */
+    export var msdfFragmentShader: {
+        name: string;
+        shader: string;
+    };
+
+
+    /** @internal */
+    export var msdfVertexShader: {
+        name: string;
+        shader: string;
+    };
+
+
+    /** @internal */
+    export var msdfFragmentShader: {
+        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[];
+    };
+
+
     /**
      * 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