@zephyr3d/device 0.1.0

package/dist/gpuobject.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gpuobject.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/helpers/drawtext.js

@@ -0,0 +1,187 @@
+import { Matrix4x4, Vector4, Vector3, parseColor } from '@zephyr3d/base';
+import { Font } from './font.js';
+import { GlyphManager } from './glyphmanager.js';
+
+const MAX_GLYPH_COUNT = 1024;
+/**
+ * Helper class to draw some text onto the screen
+ * @public
+ */ class DrawText {
+    /** @internal */ static GLYPH_COUNT = MAX_GLYPH_COUNT;
+    /** @internal */ static glyphManager = null;
+    /** @internal */ static prepared = false;
+    /** @internal */ static textVertexBuffer = null;
+    /** @internal */ static textVertexLayout = null;
+    /** @internal */ static textProgram = null;
+    /** @internal */ static textBindGroup = null;
+    /** @internal */ static textRenderStates = null;
+    /** @internal */ static textOffset = 0;
+    /** @internal */ static textMatrix = new Matrix4x4();
+    /** @internal */ static font = null;
+    /** @internal */ static vertexCache = null;
+    /** @internal */ static colorValue = new Vector4();
+    /** @internal */ static calculateTextMatrix(device, matrix) {
+        const viewport = device.getViewport();
+        const projectionMatrix = Matrix4x4.ortho(0, viewport.width, 0, viewport.height, 1, 100);
+        const flipMatrix = Matrix4x4.translation(new Vector3(0, viewport.height, 0)).scaleRight(new Vector3(1, -1, 1));
+        Matrix4x4.multiply(projectionMatrix, flipMatrix, matrix);
+    }
+    /**
+   * Set the font that will be used to draw strings
+   * @param device - The render device
+   * @param name - The font name
+   */ static setFont(device, name) {
+        this.font = Font.fetchFont(name, device.getScale()) || Font.fetchFont('12px arial', device.getScale());
+    }
+    /**
+   * Draw text onto the screen
+   * @param device - The render device
+   * @param text - The text to be drawn
+   * @param color - The text color
+   * @param x - X coordinate of the text
+   * @param y - Y coordinate of the text
+   */ static drawText(device, text, color, x, y) {
+        if (text.length > 0) {
+            device.pushDeviceStates();
+            this.prepareDrawText(device);
+            this.calculateTextMatrix(device, this.textMatrix);
+            const colorValue = parseColor(color);
+            this.colorValue.x = colorValue.r;
+            this.colorValue.y = colorValue.g;
+            this.colorValue.z = colorValue.b;
+            this.colorValue.w = colorValue.a;
+            this.textBindGroup.setValue('flip', device.type === 'webgpu' && device.getFramebuffer() ? 1 : 0);
+            this.textBindGroup.setValue('srgbOut', device.getFramebuffer() ? 0 : 1);
+            this.textBindGroup.setValue('textMatrix', this.textMatrix);
+            this.textBindGroup.setValue('textColor', this.colorValue);
+            device.setProgram(this.textProgram);
+            device.setVertexLayout(this.textVertexLayout);
+            device.setRenderStates(this.textRenderStates);
+            device.setBindGroup(0, this.textBindGroup);
+            let drawn = 0;
+            const total = text.length;
+            while(drawn < total){
+                const count = Math.min(total - drawn, this.GLYPH_COUNT - this.textOffset);
+                if (count > 0) {
+                    x = this.drawTextNoOverflow(device, text, drawn, count, x, y);
+                    drawn += count;
+                    this.textOffset += count;
+                }
+                if (this.GLYPH_COUNT === this.textOffset) {
+                    this.textOffset = 0;
+                    device.flush();
+                }
+            }
+            device.popDeviceStates();
+        }
+    }
+    /** @internal */ static drawTextNoOverflow(device, text, start, count, x, y) {
+        let drawn = 0;
+        let atlasIndex = -1;
+        let i = 0;
+        for(; i < count; i++){
+            const glyph = this.glyphManager.getGlyphInfo(text[i + start], this.font) || this.glyphManager.getGlyphInfo('?', this.font);
+            if (atlasIndex >= 0 && glyph.atlasIndex !== atlasIndex) {
+                this.textVertexBuffer.bufferSubData((this.textOffset + drawn) * 16 * 4, this.vertexCache, (this.textOffset + drawn) * 16, (i - drawn) * 16);
+                this.textBindGroup.setTexture('tex', this.glyphManager.getAtlasTexture(atlasIndex));
+                device.draw('triangle-list', (this.textOffset + drawn) * 6, (i - drawn) * 6);
+                drawn = i;
+            }
+            atlasIndex = glyph.atlasIndex;
+            const base = (this.textOffset + i) * 16;
+            this.vertexCache[base + 0] = x;
+            this.vertexCache[base + 1] = y;
+            this.vertexCache[base + 2] = glyph.uMin;
+            this.vertexCache[base + 3] = glyph.vMin;
+            this.vertexCache[base + 4] = x + glyph.width;
+            this.vertexCache[base + 5] = y;
+            this.vertexCache[base + 6] = glyph.uMax;
+            this.vertexCache[base + 7] = glyph.vMin;
+            this.vertexCache[base + 8] = x + glyph.width;
+            this.vertexCache[base + 9] = y + glyph.height;
+            this.vertexCache[base + 10] = glyph.uMax;
+            this.vertexCache[base + 11] = glyph.vMax;
+            this.vertexCache[base + 12] = x;
+            this.vertexCache[base + 13] = y + glyph.height;
+            this.vertexCache[base + 14] = glyph.uMin;
+            this.vertexCache[base + 15] = glyph.vMax;
+            x += glyph.width;
+        }
+        this.textVertexBuffer.bufferSubData((this.textOffset + drawn) * 16 * 4, this.vertexCache, (this.textOffset + drawn) * 16, (i - drawn) * 16);
+        this.textBindGroup.setTexture('tex', this.glyphManager.getAtlasTexture(atlasIndex));
+        device.draw('triangle-list', (this.textOffset + drawn) * 6, (i - drawn) * 6);
+        return x;
+    }
+    /** @internal */ static prepareDrawText(device) {
+        if (!this.prepared) {
+            this.prepared = true;
+            this.font = this.font || Font.fetchFont('16px arial', device.getScale());
+            this.glyphManager = new GlyphManager(device, 1024, 1024, 1);
+            this.vertexCache = new Float32Array(this.GLYPH_COUNT * 16);
+            this.textVertexBuffer = device.createInterleavedVertexBuffer([
+                'position_f32x2',
+                'tex0_f32x2'
+            ], this.vertexCache, {
+                dynamic: true
+            });
+            const indices = new Uint16Array(this.GLYPH_COUNT * 6);
+            for(let i = 0; i < this.GLYPH_COUNT; i++){
+                const base = i * 4;
+                indices[i * 6 + 0] = base + 0;
+                indices[i * 6 + 1] = base + 1;
+                indices[i * 6 + 2] = base + 2;
+                indices[i * 6 + 3] = base + 0;
+                indices[i * 6 + 4] = base + 2;
+                indices[i * 6 + 5] = base + 3;
+            }
+            const textIndexBuffer = device.createIndexBuffer(indices);
+            this.textVertexLayout = device.createVertexLayout({
+                vertexBuffers: [
+                    {
+                        buffer: this.textVertexBuffer
+                    }
+                ],
+                indexBuffer: textIndexBuffer
+            });
+            this.textOffset = 0;
+            this.textProgram = device.buildRenderProgram({
+                vertex (pb) {
+                    this.$inputs.pos = pb.vec2().attrib('position');
+                    this.$inputs.uv = pb.vec2().attrib('texCoord0');
+                    this.$outputs.uv = pb.vec2();
+                    this.flip = pb.int(0).uniform(0);
+                    this.textMatrix = pb.mat4().uniform(0);
+                    pb.main(function() {
+                        this.$builtins.position = pb.mul(this.textMatrix, pb.vec4(this.$inputs.pos, -50, 1));
+                        this.$if(pb.notEqual(this.flip, 0), function() {
+                            this.$builtins.position.y = pb.neg(this.$builtins.position.y);
+                        });
+                        this.$outputs.uv = this.$inputs.uv;
+                    });
+                },
+                fragment (pb) {
+                    this.$outputs.color = pb.vec4();
+                    this.textColor = pb.vec4().uniform(0);
+                    this.tex = pb.tex2D().uniform(0);
+                    this.srgbOut = pb.int().uniform(0);
+                    pb.main(function() {
+                        this.alpha = pb.mul(pb.textureSample(this.tex, this.$inputs.uv).a, this.textColor.a);
+                        this.$if(pb.notEqual(this.srgbOut, 0), function() {
+                            this.$outputs.color = pb.vec4(pb.mul(pb.pow(this.textColor.rgb, pb.vec3(1 / 2.2)), this.alpha), this.alpha);
+                        }).$else(function() {
+                            this.$outputs.color = pb.vec4(pb.mul(this.textColor.rgb, this.alpha), this.alpha);
+                        });
+                    });
+                }
+            });
+            this.textBindGroup = device.createBindGroup(this.textProgram.bindGroupLayouts[0]);
+            this.textRenderStates = device.createRenderStateSet();
+            this.textRenderStates.useBlendingState().enable(true).setBlendFuncRGB('one', 'inv-src-alpha').setBlendFuncAlpha('zero', 'one');
+            this.textRenderStates.useDepthState().enableTest(false).enableWrite(false);
+            this.textRenderStates.useRasterizerState().setCullMode('none');
+        }
+    }
+}
+
+export { DrawText };
+//# sourceMappingURL=drawtext.js.map

package/dist/helpers/drawtext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawtext.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/helpers/font.js

@@ -0,0 +1,189 @@
+/** @internal */ class FontCanvas {
+    static _canvas = null;
+    static _context = null;
+    static get canvas() {
+        this._realize();
+        return this._canvas;
+    }
+    static get context() {
+        this._realize();
+        return this._context;
+    }
+    static get font() {
+        return this.context.font;
+    }
+    static set font(font) {
+        this.context.font = font;
+    }
+    static _realize() {
+        if (!this._canvas) {
+            this._canvas = document.createElement('canvas');
+            this._canvas.width = 512;
+            this._canvas.height = 512;
+            this._canvas.style.left = '-10000px';
+            this._canvas.style.position = 'absolute';
+            //document.body.appendChild(this._canvas);
+            this._context = this._canvas.getContext('2d', {
+                willReadFrequently: true
+            });
+            this._context.textBaseline = 'top';
+            this._context.textAlign = 'left';
+            this._context.fillStyle = 'transparent';
+            this._context.fillRect(0, 0, this._canvas.width, this._canvas.height);
+            this._context.fillStyle = '#ffffff';
+            this._context.imageSmoothingEnabled = true;
+        }
+    }
+}
+/**
+   * The font class
+   * @public
+   */ class Font {
+    /** @internal */ static fontCache = {};
+    /** @internal */ _name;
+    /** @internal */ _nameScaled;
+    /** @internal */ _scale;
+    /** @internal */ _size;
+    /** @internal */ _family;
+    /** @internal */ _top;
+    /** @internal */ _bottom;
+    /** @internal */ _topScaled;
+    /** @internal */ _bottomScaled;
+    /** @internal */ _div;
+    /**
+     * Creates a instance of font class from font name and the scale value
+     * @param name - The font name
+     * @param scale - The scale value
+     */ constructor(name, scale){
+        this._top = 0;
+        this._bottom = 0;
+        this._size = 0;
+        this._topScaled = 0;
+        this._bottomScaled = 0;
+        this._family = '';
+        this._scale = scale;
+        this._name = name;
+        this._nameScaled = null;
+        this._div = document.createElement('div');
+        if (this._name) {
+            this._normalizeFont();
+        }
+    }
+    /**
+     * Fetch a font from cache
+     * @param name - The font name
+     * @param scale - The scale value
+     * @returns The font object
+     */ static fetchFont(name, scale) {
+        let fontlist = this.fontCache[name];
+        if (!fontlist) {
+            fontlist = {};
+            this.fontCache[name] = fontlist;
+        }
+        let font = fontlist[scale];
+        if (!font) {
+            font = new Font(name, scale);
+            fontlist[scale] = font;
+        }
+        return font;
+    }
+    /** Gets the font name */ get fontName() {
+        return this._name;
+    }
+    set fontName(name) {
+        this._name = name;
+        this._normalizeFont();
+    }
+    /** Gets the scaled font name */ get fontNameScaled() {
+        return this._nameScaled;
+    }
+    /** Gets the font size */ get size() {
+        return this._size;
+    }
+    /** Gets the font family */ get family() {
+        return this._family;
+    }
+    /** Gets top position of the font */ get top() {
+        return this._top;
+    }
+    /** Gets the bottom position of the font */ get bottom() {
+        return this._bottom;
+    }
+    /** Gets the scaled top position of the font */ get topScaled() {
+        return this._topScaled;
+    }
+    /** Gets the scaled bottom position of the font */ get bottomScaled() {
+        return this._bottomScaled;
+    }
+    /** Gets the maximum height of the font */ get maxHeight() {
+        return this._bottom - this._top + 1;
+    }
+    /** Gets the scaled maximum height of the font */ get maxHeightScaled() {
+        return this._bottomScaled - this._topScaled + 1;
+    }
+    /** Tests if two fonts are the same */ equalTo(other) {
+        return this._size === other._size && this._family === other._family;
+    }
+    /** @internal */ _measureFontHeight(fontName) {
+        const oldFont = FontCanvas.context.font;
+        const oldTextBaseline = FontCanvas.context.textBaseline;
+        const oldFillStyle = FontCanvas.context.fillStyle;
+        FontCanvas.context.font = fontName;
+        this._div.style.font = FontCanvas.context.font;
+        const fontSize = this._div.style.fontSize;
+        const size = parseInt(fontSize.substring(0, fontSize.length - 2));
+        const family = this._div.style.fontFamily;
+        const testString = 'bdfghijklpq国美|_~';
+        const metric = FontCanvas.context.measureText(testString);
+        let top, bottom;
+        top = 0;
+        bottom = size - 1;
+        const extra = 10;
+        const halfExtra = extra >> 1;
+        const maxWidth = Math.ceil(metric.width) + extra;
+        const maxHeight = size + extra;
+        FontCanvas.context.clearRect(0, 0, maxWidth, maxHeight);
+        FontCanvas.context.textBaseline = 'top';
+        FontCanvas.context.fillStyle = '#ffffff';
+        FontCanvas.context.fillText(testString, halfExtra, halfExtra);
+        const bitmap = FontCanvas.context.getImageData(0, 0, maxWidth, maxHeight);
+        const pixels = bitmap.data;
+        for(let i = 0; i < maxWidth * maxHeight; i++){
+            if (pixels[i * 4 + 3] > 0) {
+                top = Math.floor(i / maxWidth);
+                break;
+            }
+        }
+        for(let i = maxWidth * maxHeight - 1; i >= 0; i--){
+            if (pixels[i * 4 + 3] > 0) {
+                bottom = Math.floor(i / maxWidth);
+                break;
+            }
+        }
+        top -= halfExtra;
+        bottom -= halfExtra;
+        FontCanvas.context.font = oldFont;
+        FontCanvas.context.textBaseline = oldTextBaseline;
+        FontCanvas.context.fillStyle = oldFillStyle;
+        return {
+            size,
+            family,
+            top,
+            bottom
+        };
+    }
+    /** @internal */ _normalizeFont() {
+        const info = this._measureFontHeight(this._name);
+        this._nameScaled = `${Math.round(info.size * this._scale)}px ${info.family}`;
+        const infoScaled = this._measureFontHeight(this._nameScaled);
+        this._size = info.size;
+        this._family = info.family;
+        this._top = info.top;
+        this._bottom = info.bottom;
+        this._topScaled = infoScaled.top;
+        this._bottomScaled = infoScaled.bottom;
+    }
+}
+
+export { Font, FontCanvas };
+//# sourceMappingURL=font.js.map

package/dist/helpers/font.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"font.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/helpers/glyphmanager.js

@@ -0,0 +1,121 @@
+import { FontCanvas } from './font.js';
+import { TextureAtlasManager } from './textureatlas.js';
+
+/**
+ * Manager of texture glyphs
+ * @public
+ */ class GlyphManager extends TextureAtlasManager {
+    /**
+   * Creates a new glyph manager instance
+   * @param device - The render device
+   * @param binWidth - Width of an atlas bin
+   * @param binHeight - Height of an atlas bin
+   * @param border - Border width of an atlas
+   */ constructor(device, binWidth, binHeight, border){
+        super(device, binWidth, binHeight, border, true);
+        this.atlasTextureRestoreHandler = async ()=>{
+            if (!this.isEmpty()) {
+                this.clear();
+            }
+        };
+    }
+    /**
+   * Gets the atlas information for given character
+   * @param char - The character
+   * @param font - Font of the character
+   * @returns Atlas information for the glyph
+   */ getGlyphInfo(char, font) {
+        if (!char || !font) {
+            return null;
+        }
+        let glyphInfo = this.getAtlasInfo(this._hash(char, font));
+        if (!glyphInfo) {
+            glyphInfo = this._cacheGlyph(char, font);
+            glyphInfo.width = Math.round(glyphInfo.width * (font.maxHeight / font.maxHeightScaled));
+            glyphInfo.height = font.maxHeight;
+        }
+        return glyphInfo;
+    }
+    /**
+   * Measuring the width of a string
+   * @param str - The string to be measured
+   * @param charMargin - margin size between characters
+   * @param font - Font of the string
+   * @returns Width of the string
+   */ measureStringWidth(str, charMargin, font) {
+        let w = 0;
+        for (const ch of str){
+            w += charMargin + this.getCharWidth(ch, font);
+        }
+        return w;
+    }
+    /**
+   * Clips a string so that it's width is not larger than the given value
+   * @param str - The string to be clipped
+   * @param width - The desired maximum width
+   * @param charMargin - Margin size between characters
+   * @param start - Start index of the string to be clipped
+   * @param font - Font of the string
+   * @returns 
+   */ clipStringToWidth(str, width, charMargin, start, font) {
+        let sum = 0;
+        let i = start;
+        for(; i < str.length; i++){
+            sum += charMargin + this.getCharWidth(str[i], font);
+            if (sum > width) {
+                break;
+            }
+        }
+        return i - start;
+    }
+    /** @internal */ _hash(char, font) {
+        return `${font.family}@${font.size}&${char}`;
+    }
+    /** @internal */ _cacheGlyph(char, font) {
+        const bitmap = this._getGlyphBitmap(char, font);
+        return this.pushBitmap(this._hash(char, font), bitmap);
+    }
+    /**
+   * Measuring width of a character
+   * @param char - The character to be measured
+   * @param font - Font of the character
+   * @returns Width of the character
+   */ getCharWidth(char, font) {
+        if (!font) {
+            return 0;
+        }
+        FontCanvas.font = font.fontNameScaled;
+        const metric = FontCanvas.context.measureText(char);
+        let w = metric.width;
+        if (w === 0) {
+            return 0;
+        }
+        if (typeof metric.actualBoundingBoxRight === 'number') {
+            w = Math.floor(Math.max(w, metric.actualBoundingBoxRight) + 0.8);
+        }
+        w = Math.round(w * (font.maxHeight / font.maxHeightScaled));
+        return w;
+    }
+    /** @internal */ _getGlyphBitmap(char, font) {
+        if (!font) {
+            return null;
+        }
+        FontCanvas.font = font.fontNameScaled;
+        const metric = FontCanvas.context.measureText(char);
+        let w = metric.width;
+        if (w === 0) {
+            return null;
+        }
+        if (typeof metric.actualBoundingBoxRight === 'number') {
+            w = Math.floor(Math.max(w, metric.actualBoundingBoxRight) + 0.8);
+        }
+        const h = font.maxHeightScaled;
+        FontCanvas.context.fillStyle = '#fff';
+        FontCanvas.context.clearRect(0, 0, w + 2, h);
+        FontCanvas.context.fillText(char, 0, -font.topScaled);
+        return FontCanvas.context.getImageData(0, 0, w, h);
+    }
+}
+
+export { GlyphManager };
+//# sourceMappingURL=glyphmanager.js.map

package/dist/helpers/glyphmanager.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"glyphmanager.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/helpers/textureatlas.js

@@ -0,0 +1,170 @@
+import { RectsPacker } from '@zephyr3d/base';
+
+/**
+ * Texture atlas manager
+ * @public
+ */ class TextureAtlasManager {
+    /** @internal */ static ATLAS_WIDTH = 1024;
+    /** @internal */ static ATLAS_HEIGHT = 1024;
+    /** @internal */ _packer;
+    /** @internal */ _device;
+    /** @internal */ _binWidth;
+    /** @internal */ _binHeight;
+    /** @internal */ _rectBorderWidth;
+    /** @internal */ _linearSpace;
+    /** @internal */ _atlasList;
+    /** @internal */ _atlasInfoMap;
+    /** @internal */ _atlasRestoreHandler;
+    /**
+   * Creates a new texture atlas manager instance
+   * @param device - The render device
+   * @param binWidth - Width of an atlas bin
+   * @param binHeight - Height of an atlas bin
+   * @param rectBorderWidth - Border width of an atlas
+   * @param linearSpace - true if the texture space is linear
+   */ constructor(device, binWidth, binHeight, rectBorderWidth, linearSpace){
+        this._device = device;
+        this._binWidth = binWidth;
+        this._binHeight = binHeight;
+        this._rectBorderWidth = rectBorderWidth;
+        this._linearSpace = !!linearSpace;
+        this._packer = new RectsPacker(this._binWidth, this._binHeight);
+        this._atlasList = [];
+        this._atlasInfoMap = {};
+        this._atlasRestoreHandler = null;
+    }
+    /**
+   * The texture restore handler callback function
+   * This callback function will be called whenever the device has been restored
+   */ get atlasTextureRestoreHandler() {
+        return this._atlasRestoreHandler;
+    }
+    set atlasTextureRestoreHandler(f) {
+        this._atlasRestoreHandler = f;
+    }
+    /**
+   * Gets the atlas texture of a given index
+   * @param index - Index of the atlas bin
+   * @returns Atlas texture for given index
+   */ getAtlasTexture(index) {
+        return this._atlasList[index];
+    }
+    /**
+   * Gets the information about specified atlas
+   * @param key - Key of the atlas
+   * @returns Information of the atlas
+   */ getAtlasInfo(key) {
+        return this._atlasInfoMap[key] || null;
+    }
+    /**
+   * Check if no atlas has been created
+   * @returns true if no atlas has been created
+   */ isEmpty() {
+        return this._atlasList.length === 0;
+    }
+    /**
+   * Removes all created atlases
+   */ clear() {
+        this._packer.clear();
+        for (const tex of this._atlasList){
+            tex.dispose();
+        }
+        this._atlasList = [];
+        this._atlasInfoMap = {};
+    }
+    /**
+   * Inserts a rectangle of a canvas to the atlas texture
+   * @param key - Key of the atlas
+   * @param ctx - The canvas context
+   * @param x - x offset of the rectangle
+   * @param y - y offset of the rectangle
+   * @param w - width of the rectangle
+   * @param h - height of the rectangle
+   * @returns The atals info or null if insert failed
+   */ pushCanvas(key, ctx, x, y, w, h) {
+        const rc = this._packer.insert(w + 2 * this._rectBorderWidth, h + 2 * this._rectBorderWidth);
+        if (rc) {
+            const atlasX = rc.x + this._rectBorderWidth;
+            const atlasY = rc.y + this._rectBorderWidth;
+            this._updateAtlasTextureCanvas(rc.binIndex, ctx, atlasX, atlasY, w, h, x, y);
+            const info = {
+                atlasIndex: rc.binIndex,
+                uMin: atlasX / this._binWidth,
+                vMin: atlasY / this._binHeight,
+                uMax: (atlasX + w) / this._binWidth,
+                vMax: (atlasY + h) / this._binHeight,
+                width: w,
+                height: h
+            };
+            this._atlasInfoMap[key] = info;
+            return info;
+        }
+        return null;
+    }
+    /**
+   * Inserts a bitmap to the atlas texture
+   * @param key - Key of the atlas
+   * @param bitmap - The bitmap object
+   * @returns The atals info or null if insert failed
+   */ pushBitmap(key, bitmap) {
+        const rc = this._packer.insert(bitmap.width + 2 * this._rectBorderWidth, bitmap.height + 2 * this._rectBorderWidth);
+        if (rc) {
+            const atlasX = rc.x + this._rectBorderWidth;
+            const atlasY = rc.y + this._rectBorderWidth;
+            this._updateAtlasTexture(rc.binIndex, bitmap, atlasX, atlasY);
+            const info = {
+                atlasIndex: rc.binIndex,
+                uMin: atlasX / this._binWidth,
+                vMin: atlasY / this._binHeight,
+                uMax: (atlasX + bitmap.width) / this._binWidth,
+                vMax: (atlasY + bitmap.height) / this._binHeight,
+                width: bitmap.width,
+                height: bitmap.height
+            };
+            this._atlasInfoMap[key] = info;
+            return info;
+        }
+        return null;
+    }
+    /** @internal */ _createAtlasTexture() {
+        const tex = this._device.createTexture2D('rgba8unorm', this._binWidth, this._binHeight, {
+            samplerOptions: {
+                mipFilter: 'none'
+            }
+        });
+        tex.update(new Uint8Array(tex.width * tex.height * 4), 0, 0, tex.width, tex.height);
+        tex.restoreHandler = async ()=>{
+            tex.update(new Uint8Array(tex.width * tex.height * 4), 0, 0, tex.width, tex.height);
+            this._atlasRestoreHandler && await this._atlasRestoreHandler(tex);
+        };
+        return tex;
+    }
+    /** @internal */ _updateAtlasTextureCanvas(atlasIndex, ctx, x, y, w, h, xOffset, yOffset) {
+        let textureAtlas = null;
+        if (atlasIndex === this._atlasList.length) {
+            textureAtlas = this._createAtlasTexture();
+            this._atlasList.push(textureAtlas);
+        } else {
+            textureAtlas = this._atlasList[atlasIndex];
+        }
+        textureAtlas.updateFromElement(ctx.canvas, x, y, xOffset, yOffset, w, h);
+    }
+    /** @internal */ _updateAtlasTexture(atlasIndex, bitmap, x, y) {
+        let textureAtlas = null;
+        if (atlasIndex === this._atlasList.length) {
+            textureAtlas = this._createAtlasTexture();
+            this._atlasList.push(textureAtlas);
+        } else {
+            textureAtlas = this._atlasList[atlasIndex];
+        }
+        if (bitmap instanceof ImageBitmap) {
+            textureAtlas.updateFromElement(bitmap, x, y, 0, 0, bitmap.width, bitmap.height);
+        } else {
+            const originValues = new Uint8Array(bitmap.data.buffer);
+            textureAtlas.update(originValues, x, y, bitmap.width, bitmap.height);
+        }
+    }
+}
+
+export { TextureAtlasManager };
+//# sourceMappingURL=textureatlas.js.map

package/dist/helpers/textureatlas.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"textureatlas.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}