@onerjs/core 9.0.2 → 9.0.3

package/Engines/thinNativeEngine.pure.d.ts

@@ -13,11 +13,11 @@ import { type AbstractEngineOptions, type ISceneLike } from "./abstractEngine.pu
 import { ThinEngine } from "./thinEngine.pure.js";
 import { type IMaterialContext } from "./IMaterialContext.js";
 import { type IDrawContext } from "./IDrawContext.js";
-import { type ICanvas, type IImage, type IPath2D } from "./ICanvas.js";
+import { type IImage, type IPath2D } from "./ICanvas.js";
 import { type IStencilState } from "../States/IStencilState.js";
 import { type RenderTargetWrapper } from "./renderTargetWrapper.js";
 import { type NativeData, NativeDataStream } from "./Native/nativeDataStream.js";
-import { type INative, type INativeEngine, type NativeFramebuffer, type NativeTexture } from "./Native/nativeInterfaces.js";
+import { type INative, type INativeCanvas, type INativeEngine, type NativeFramebuffer, type NativeTexture } from "./Native/nativeInterfaces.js";
 import { NativeRenderTargetWrapper } from "./Native/nativeRenderTargetWrapper.js";
 import { type IHardwareTextureWrapper } from "../Materials/Textures/hardwareTextureWrapper.js";
 import { type _IShaderProcessingContext } from "./Processors/shaderProcessingOptions.js";
@@ -66,6 +66,8 @@ export declare class ThinNativeEngine extends ThinEngine {
     private _commandBufferEncoder;
     private _frameStats;
     private _boundBuffersVertexArray;
+    private _fontMeasureCanvas?;
+    private _fontMeasureContext?;
     private _transformFeedbackBuffer;
     private _transformFeedbackActive;
     /**
@@ -589,9 +591,9 @@ export declare class ThinNativeEngine extends ThinEngine {
     updateTextureComparisonFunction(texture: InternalTexture, comparisonFunction: number): void;
     /**
      * Generates mipmaps for the given texture.
-     * @param _texture The texture to generate the mipmaps for.
+     * @param texture The texture to generate the mipmaps for.
      */
-    generateMipmaps(_texture: InternalTexture): void;
+    generateMipmaps(texture: InternalTexture): void;
     /**
      * Creates one framebuffer per layer (or cube face) of a native texture.
      * @internal
@@ -618,6 +620,7 @@ export declare class ThinNativeEngine extends ThinEngine {
      * @internal
      */
     _isFrameGraphFramebuffer(framebuffer: NativeFramebuffer): boolean;
+    private _getFrameGraphAutoGenerateMips;
     /**
      * Lazily builds (or reuses a shared) bgfx framebuffer for a frame graph render-target wrapper whose
      * textures were attached after creation (dontCreateTextures). All wrappers that reference the same
@@ -683,7 +686,7 @@ export declare class ThinNativeEngine extends ThinEngine {
      * color target (and its first requested layer) on older Babylon Native runtimes without createMultiFrameBuffer.
      * @internal
      */
-    _createNativeMultiFrameBuffer(colorTextures: NativeTexture[], width: number, height: number, generateStencilBuffer: boolean, generateDepthBuffer: boolean, samples: number, layers?: number[], explicitDepthTexture?: NativeTexture): NativeFramebuffer;
+    _createNativeMultiFrameBuffer(colorTextures: NativeTexture[], width: number, height: number, generateStencilBuffer: boolean, generateDepthBuffer: boolean, samples: number, layers?: number[], explicitDepthTexture?: NativeTexture, autoGenerateMips?: boolean[]): NativeFramebuffer;
     generateMipMapsForCubemap(_texture: InternalTexture, _unbind?: boolean): void;
     bindAttachments(attachments: number[]): void;
     clearAttachments(color: Nullable<IColor4Like>, attachments: number[], clearColor: boolean, clearDepth: boolean, clearStencil?: boolean, stencilClearValue?: number): void;
@@ -733,9 +736,9 @@ export declare class ThinNativeEngine extends ThinEngine {
      * Create a canvas
      * @param width width
      * @param height height
-     * @returns ICanvas interface
+     * @returns INativeCanvas interface
      */
-    createCanvas(width: number, height: number): ICanvas;
+    createCanvas(width: number, height: number): INativeCanvas;
     /**
      * Create an image to use with canvas
      * @returns IImage interface

package/Engines/thinNativeEngine.pure.js

@@ -412,6 +412,9 @@ export class ThinNativeEngine extends ThinEngine {
         if (this._boundBuffersVertexArray) {
             this._deleteVertexArray(this._boundBuffersVertexArray);
         }
+        this._fontMeasureCanvas?.dispose();
+        this._fontMeasureCanvas = undefined;
+        this._fontMeasureContext = undefined;
         this._engine.dispose();
     }
     /**
@@ -1638,11 +1641,16 @@ export class ThinNativeEngine extends ThinEngine {
             const context = canvas.getContext();
             // flush need to happen before getCanvasTexture: flush will create the render target synchronously (if it's not been created before)
             context.flush();
-            const source = canvas.getCanvasTexture();
+            // Older runtimes take no options and always copy with their legacy alpha handling.
+            const supportsOptions = this._engine.supportsDynamicTextureMipMaps === true;
+            const source = supportsOptions ? canvas.getCanvasTexture(premulAlpha, texture.generateMipMaps) : canvas.getCanvasTexture();
             this._commandBufferEncoder.startEncodingCommand(_native.Engine.COMMAND_COPYTEXTURE);
             this._commandBufferEncoder.encodeCommandArgAsNativeData(source);
             this._commandBufferEncoder.encodeCommandArgAsNativeData(destination);
             this._commandBufferEncoder.finishEncodingCommand();
+            if (supportsOptions) {
+                texture._premulAlpha = premulAlpha;
+            }
             texture.isReady = true;
         }
     }
@@ -1651,7 +1659,9 @@ export class ThinNativeEngine extends ThinEngine {
         // Keep at least 1x1 because many bgfx methods assume a non-zero texture size.
         width = Math.max(Math.floor(width), 1);
         height = Math.max(Math.floor(height), 1);
-        return this.createRawTexture(new Uint8Array(width * height * 4), width, height, 5, false, false, samplingMode);
+        // Older runtimes cannot regenerate mips when the canvas contents are copied into the texture.
+        generateMipMaps = generateMipMaps && this._engine.supportsDynamicTextureMipMaps === true;
+        return this.createRawTexture(new Uint8Array(width * height * 4), width, height, 5, generateMipMaps, false, samplingMode);
     }
     createVideoElement(constraints) {
         // create native object depending on stream. Only NativeCamera is supported for now.
@@ -2298,7 +2308,7 @@ export class ThinNativeEngine extends ThinEngine {
                 for (let layer = 0; layer < layerCount; layer++) {
                     // First call creates the multi-layer sampleable depth and aliases it into nativeDepth;
                     // subsequent calls borrow the same depth array and attach the matching layer.
-                    framebuffers.push(this._createNativeMultiFrameBuffer([nativeColor], width, height, generateStencil, true, samples, [layer], nativeDepth));
+                    framebuffers.push(this._createNativeMultiFrameBuffer([nativeColor], width, height, generateStencil, true, samples, [layer], nativeDepth, [colorTexture.generateMipMaps]));
                 }
                 // The _framebuffers setter releases the previous handles.
                 nativeRTWrapper._framebuffers = framebuffers;
@@ -2314,14 +2324,16 @@ export class ThinNativeEngine extends ThinEngine {
         // point, which is how CreateFrameBufferImpl recognizes a request for a readable depth attachment that
         // it aliases back into the supplied texture so it can be sampled afterwards.
         const colorResources = [];
+        const autoGenerateMips = [];
         for (const colorTexture of nativeRTWrapper.textures ?? []) {
             const colorResource = colorTexture?._hardwareTexture?.underlyingResource;
             if (colorResource) {
                 colorResources.push(colorResource);
+                autoGenerateMips.push(colorTexture.generateMipMaps);
             }
         }
         const nativeDepth = texture._hardwareTexture.underlyingResource;
-        const framebuffer = this._createNativeMultiFrameBuffer(colorResources, width, height, generateStencil, true, samples, undefined, nativeDepth);
+        const framebuffer = this._createNativeMultiFrameBuffer(colorResources, width, height, generateStencil, true, samples, undefined, nativeDepth, autoGenerateMips);
         nativeRTWrapper._framebufferDepthStencil = framebuffer;
         this._setTextureSampling(nativeDepth, getNativeSamplingMode(texture.samplingMode));
         this.updateTextureComparisonFunction(texture, texture._comparisonFunction);
@@ -2463,14 +2475,22 @@ export class ThinNativeEngine extends ThinEngine {
     }
     /**
      * Generates mipmaps for the given texture.
-     * @param _texture The texture to generate the mipmaps for.
+     * @param texture The texture to generate the mipmaps for.
      */
-    generateMipmaps(_texture) {
-        // The WebGL implementation binds the texture and calls gl.generateMipmap; there is no equivalent
-        // standalone command on Babylon Native, and none is needed: a render target whose mip chain must be
-        // rebuilt is attached to its framebuffer with BGFX_RESOLVE_AUTO_GEN_MIPS (see CreateFrameBufferImpl),
-        // so bgfx regenerates the chain when the view resolves. Without this override the inherited WebGL path
-        // dereferenced a non-existent GL context (frame graph tasks call generateMipMaps explicitly).
+    generateMipmaps(texture) {
+        const command = _native.Engine.COMMAND_GENERATEMIPMAPS;
+        if (!command) {
+            // Older runtimes always regenerate MRT mips at resolve and lack an explicit generation command.
+            Logger.Warn("NativeEngine: explicit mip generation is not supported by this runtime; relying on legacy framebuffer resolve.", 1);
+            return;
+        }
+        const nativeTexture = texture._hardwareTexture?.underlyingResource;
+        if (!nativeTexture || !this._hasMipStorage(texture)) {
+            throw new Error("NativeEngine: explicit mip generation requires a hardware texture with mip storage.");
+        }
+        this._commandBufferEncoder.startEncodingCommand(command);
+        this._commandBufferEncoder.encodeCommandArgAsNativeData(nativeTexture);
+        this._commandBufferEncoder.finishEncodingCommand();
     }
     /**
      * Creates one framebuffer per layer (or cube face) of a native texture.
@@ -2531,6 +2551,10 @@ export class ThinNativeEngine extends ThinEngine {
     }
     // Reference counts + metadata for framebuffers shared across frame graph render-target wrappers
     // are stored in _frameGraphFramebufferRefCount (declared with the other engine fields).
+    _getFrameGraphAutoGenerateMips(texture) {
+        // Runtimes without explicit generation need legacy automatic resolves for allocated mips.
+        return texture.generateMipMaps || (!_native.Engine.COMMAND_GENERATEMIPMAPS && this._hasMipStorage(texture));
+    }
     /**
      * Lazily builds (or reuses a shared) bgfx framebuffer for a frame graph render-target wrapper whose
      * textures were attached after creation (dontCreateTextures). All wrappers that reference the same
@@ -2572,42 +2596,56 @@ export class ThinNativeEngine extends ThinEngine {
         // Like a GL framebuffer, an explicit depth-stencil texture is always attached as-is, so every pass that
         // references it (clears, geometry, overlays, later samplers) sees the same real depth buffer.
         const sharedDepthResource = depthStencilTexture?._hardwareTexture?.underlyingResource;
-        const cached = hardwareTexture._frameGraphFramebuffer;
-        const cachedMeta = cached ? this._frameGraphFramebufferRefCount.get(cached) : undefined;
+        let cached = nativeRTWrapper._framebuffer ?? hardwareTexture._frameGraphFramebuffer;
         // Reuse the cached framebuffer when it is compatible: the same ordered color attachments (a swap of any
-        // attachment, not only the primary one, needs a new framebuffer), the same sample count, depth/stencil
+        // attachment, not only the primary one, needs a new framebuffer), mip policies, sample count, depth/stencil
         // buffers when this pass needs them (a pass that does not need them can safely reuse a framebuffer that
         // has them), and the same shared depth texture (so a shared-depth pass never reuses an auto-depth
         // framebuffer, and vice versa). History-texture swaps invalidate these wrappers every frame, so this check
         // runs in the render loop: compare in place and only allocate the color list for a new framebuffer.
-        let sameColors = !!cachedMeta && cachedMeta.colorResources.length === textureCount;
-        for (let i = 0; sameColors && i < textureCount; i++) {
-            sameColors = cachedMeta.colorResources[i] === textures[i]._hardwareTexture.underlyingResource;
-        }
-        if (cached &&
-            cachedMeta &&
-            sameColors &&
-            cachedMeta.samples === samples &&
-            (cachedMeta.hasDepth || !generateDepthBuffer) &&
-            (cachedMeta.hasStencil || !generateStencilBuffer) &&
-            cachedMeta.sharedDepthResource === sharedDepthResource) {
-            cachedMeta.count++;
-            nativeRTWrapper._framebuffer = cached;
-            return;
+        // Rejecting a stale retained framebuffer must not hide a compatible shared replacement.
+        for (let cacheAttempt = 0; cacheAttempt < 2; cacheAttempt++) {
+            const cachedMeta = cached ? this._frameGraphFramebufferRefCount.get(cached) : undefined;
+            let sameColors = !!cachedMeta && cachedMeta.colorResources.length === textureCount;
+            for (let i = 0; sameColors && i < textureCount; i++) {
+                sameColors =
+                    cachedMeta.colorResources[i] === textures[i]._hardwareTexture.underlyingResource &&
+                        cachedMeta.autoGenerateMips[i] === this._getFrameGraphAutoGenerateMips(textures[i]);
+            }
+            if (cached &&
+                cachedMeta &&
+                sameColors &&
+                cachedMeta.samples === samples &&
+                (cachedMeta.hasDepth || !generateDepthBuffer) &&
+                (cachedMeta.hasStencil || !generateStencilBuffer) &&
+                cachedMeta.sharedDepthResource === sharedDepthResource) {
+                if (nativeRTWrapper._framebuffer !== cached) {
+                    cachedMeta.count++;
+                    nativeRTWrapper._framebuffer = cached;
+                }
+                return;
+            }
+            if (cached === hardwareTexture._frameGraphFramebuffer) {
+                break;
+            }
+            cached = hardwareTexture._frameGraphFramebuffer;
         }
         const colorTextures = new Array(textureCount);
+        const autoGenerateMips = new Array(textureCount);
         for (let i = 0; i < textureCount; i++) {
             colorTextures[i] = textures[i]._hardwareTexture.underlyingResource;
+            autoGenerateMips[i] = this._getFrameGraphAutoGenerateMips(textures[i]);
         }
         const framebuffer = sharedDepthResource
-            ? this._createNativeMultiFrameBuffer(colorTextures, nativeRTWrapper.width, nativeRTWrapper.height, generateStencilBuffer, true, samples, undefined, sharedDepthResource)
+            ? this._createNativeMultiFrameBuffer(colorTextures, nativeRTWrapper.width, nativeRTWrapper.height, generateStencilBuffer, true, samples, undefined, sharedDepthResource, autoGenerateMips)
             : colorTextures.length === 1
-                ? this._engine.createFrameBuffer(colorTextures[0], nativeRTWrapper.width, nativeRTWrapper.height, generateStencilBuffer, generateDepthBuffer, samples)
-                : this._createNativeMultiFrameBuffer(colorTextures, nativeRTWrapper.width, nativeRTWrapper.height, generateStencilBuffer, generateDepthBuffer, samples);
+                ? this._engine.createFrameBuffer(colorTextures[0], nativeRTWrapper.width, nativeRTWrapper.height, generateStencilBuffer, generateDepthBuffer, samples, undefined, undefined, autoGenerateMips[0])
+                : this._createNativeMultiFrameBuffer(colorTextures, nativeRTWrapper.width, nativeRTWrapper.height, generateStencilBuffer, generateDepthBuffer, samples, undefined, undefined, autoGenerateMips);
         this._frameGraphFramebufferRefCount.set(framebuffer, {
             count: 1,
             hardwareTexture,
             colorResources: colorTextures,
+            autoGenerateMips,
             hasDepth: generateDepthBuffer,
             hasStencil: generateStencilBuffer,
             samples,
@@ -3097,10 +3135,12 @@ export class ThinNativeEngine extends ThinEngine {
             return;
         }
         const colorHandles = [];
+        const autoGenerateMips = [];
         for (const texture of textures) {
             const handle = texture?._hardwareTexture?.underlyingResource;
             if (handle) {
                 colorHandles.push(handle);
+                autoGenerateMips.push(texture.generateMipMaps);
             }
         }
         // bgfx framebuffers use a dense, ordered attachment list, so only (re)build once every expected color
@@ -3118,7 +3158,7 @@ export class ThinNativeEngine extends ThinEngine {
         // attached after dontCreateTextures). Otherwise fall back to auto depth from _generateDepthBuffer.
         const explicitDepth = rtWrapper._depthStencilTexture?._hardwareTexture?.underlyingResource;
         const generateDepthBuffer = !!explicitDepth || rtWrapper._generateDepthBuffer;
-        rtWrapper._framebuffer = this._createNativeMultiFrameBuffer(colorHandles, width, height, this._getDepthAttachmentStencil(rtWrapper), generateDepthBuffer, rtWrapper._samples, undefined, explicitDepth);
+        rtWrapper._framebuffer = this._createNativeMultiFrameBuffer(colorHandles, width, height, this._getDepthAttachmentStencil(rtWrapper), generateDepthBuffer, rtWrapper._samples, undefined, explicitDepth, autoGenerateMips);
         this._applyDepthTextureSampling(rtWrapper);
     }
     _applyDepthTextureSampling(rtWrapper) {
@@ -3135,13 +3175,13 @@ export class ThinNativeEngine extends ThinEngine {
      * color target (and its first requested layer) on older Babylon Native runtimes without createMultiFrameBuffer.
      * @internal
      */
-    _createNativeMultiFrameBuffer(colorTextures, width, height, generateStencilBuffer, generateDepthBuffer, samples, layers, explicitDepthTexture) {
+    _createNativeMultiFrameBuffer(colorTextures, width, height, generateStencilBuffer, generateDepthBuffer, samples, layers, explicitDepthTexture, autoGenerateMips) {
         if (this._engine.createMultiFrameBuffer) {
-            return this._engine.createMultiFrameBuffer(colorTextures, width, height, generateStencilBuffer, generateDepthBuffer, samples, layers, explicitDepthTexture);
+            return this._engine.createMultiFrameBuffer(colorTextures, width, height, generateStencilBuffer, generateDepthBuffer, samples, layers, explicitDepthTexture, autoGenerateMips);
         }
         // Warn once (limit 1): the framebuffer can be rebuilt many times during attachment setup/swaps.
         Logger.Warn("createMultiFrameBuffer is not supported by this version of Babylon Native; multi render targets are unavailable. Falling back to a single-attachment framebuffer bound to the first color target.", 1);
-        return this._engine.createFrameBuffer(colorTextures[0] ?? null, width, height, generateStencilBuffer, generateDepthBuffer, samples, layers?.[0]);
+        return this._engine.createFrameBuffer(colorTextures[0] ?? null, width, height, generateStencilBuffer, generateDepthBuffer, samples, layers?.[0], undefined, autoGenerateMips?.[0]);
     }
     generateMipMapsForCubemap(_texture, _unbind = true) {
         // The WebGL path rebinds gl.TEXTURE_CUBE_MAP and calls gl.generateMipmap; both deref _gl, which is
@@ -3368,7 +3408,9 @@ export class ThinNativeEngine extends ThinEngine {
         // first time the wrapper is bound. Several wrappers can reference the same underlying texture(s), so the
         // framebuffer is cached on (and shared through) the first color texture's hardware wrapper to avoid each
         // fresh framebuffer/view clearing the texture and clobbering earlier passes.
-        if (!nativeRTWrapper._framebuffers && !nativeRTWrapper._framebufferDepthStencil && !nativeRTWrapper._framebuffer) {
+        if (!nativeRTWrapper._framebuffers &&
+            !nativeRTWrapper._framebufferDepthStencil &&
+            (!nativeRTWrapper._framebuffer || this._frameGraphFramebufferRefCount.has(nativeRTWrapper._framebuffer))) {
             this._buildFrameGraphFramebuffer(nativeRTWrapper);
         }
         if (nativeRTWrapper._framebuffers) {
@@ -3438,12 +3480,12 @@ export class ThinNativeEngine extends ThinEngine {
                 }
                 // generateDepth must be set so a depth texture without a native handle yet (created directly on this
                 // volume) is allocated and aliased by the first slice; later slices borrow the existing handle.
-                framebuffer = this._engine.createMultiFrameBuffer([nativeTexture], width, height, HasStencilAspect(depthTexture.format), true, nativeRTWrapper.samples, [layer], nativeDepth);
+                framebuffer = this._createNativeMultiFrameBuffer([nativeTexture], width, height, HasStencilAspect(depthTexture.format), true, nativeRTWrapper.samples, [layer], nativeDepth, [nativeRTWrapper.texture.generateMipMaps]);
                 this._setTextureSampling(nativeDepth, getNativeSamplingMode(depthTexture.samplingMode));
                 this.updateTextureComparisonFunction(depthTexture, depthTexture._comparisonFunction);
             }
             else {
-                framebuffer = this._engine.createFrameBuffer(nativeTexture, width, height, nativeRTWrapper._generateStencilBuffer, nativeRTWrapper._generateDepthBuffer, nativeRTWrapper.samples, layer, mip);
+                framebuffer = this._engine.createFrameBuffer(nativeTexture, width, height, nativeRTWrapper._generateStencilBuffer, nativeRTWrapper._generateDepthBuffer, nativeRTWrapper.samples, layer, mip, nativeRTWrapper.texture.generateMipMaps);
             }
             nativeRTWrapper._layerFramebuffers.set(key, framebuffer);
         }
@@ -3531,20 +3573,22 @@ export class ThinNativeEngine extends ThinEngine {
                 throw new Error("NativeEngine: cannot bind a layered MRT until every color attachment is assigned.");
             }
             const attachmentLayer = tex.is3D ? (layerIndices?.[i] ?? i) : nativeRTWrapper.getBaseArrayLayer(i);
-            if (upToDate && (key.colors[i] !== nativeTexture || key.layers[i] !== attachmentLayer)) {
+            if (upToDate && (key.colors[i] !== nativeTexture || key.layers[i] !== attachmentLayer || key.autoGenerateMips[i] !== tex.generateMipMaps)) {
                 upToDate = false;
             }
         }
         if (!upToDate) {
             const colorTextures = new Array(expectedCount);
             const layers = new Array(expectedCount);
+            const autoGenerateMips = new Array(expectedCount);
             for (let i = 0; i < expectedCount; i++) {
                 const tex = textures[i];
                 colorTextures[i] = tex._hardwareTexture.underlyingResource;
                 layers[i] = tex.is3D ? (layerIndices?.[i] ?? i) : nativeRTWrapper.getBaseArrayLayer(i);
+                autoGenerateMips[i] = tex.generateMipMaps;
             }
-            nativeRTWrapper._framebuffer = this._createNativeMultiFrameBuffer(colorTextures, nativeRTWrapper.width, nativeRTWrapper.height, this._getDepthAttachmentStencil(nativeRTWrapper), !!depth || nativeRTWrapper._generateDepthBuffer, samples, layers, depth);
-            nativeRTWrapper._layeredFramebufferKey = { colors: colorTextures, layers, depth, samples };
+            nativeRTWrapper._framebuffer = this._createNativeMultiFrameBuffer(colorTextures, nativeRTWrapper.width, nativeRTWrapper.height, this._getDepthAttachmentStencil(nativeRTWrapper), !!depth || nativeRTWrapper._generateDepthBuffer, samples, layers, depth, autoGenerateMips);
+            nativeRTWrapper._layeredFramebufferKey = { colors: colorTextures, layers, depth, samples, autoGenerateMips };
             this._applyDepthTextureSampling(nativeRTWrapper);
         }
         this._bindUnboundFramebuffer(nativeRTWrapper._framebuffer);
@@ -3659,10 +3703,10 @@ export class ThinNativeEngine extends ThinEngine {
     // TODO: Rename to match naming in base implementation once refactoring allows different parameters.
     _updateAnisotropicLevel(texture) {
         const internalTexture = texture.getInternalTexture();
-        const value = texture.anisotropicFilteringLevel;
         if (!internalTexture || !internalTexture._hardwareTexture) {
             return;
         }
+        const value = Math.min(texture.anisotropicFilteringLevel, this._caps.maxAnisotropy);
         if (internalTexture._cachedAnisotropicFilteringLevel !== value) {
             this._commandBufferEncoder.startEncodingCommand(_native.Engine.COMMAND_SETTEXTUREANISOTROPICLEVEL);
             this._commandBufferEncoder.encodeCommandArgAsNativeData(internalTexture._hardwareTexture.underlyingResource);
@@ -3720,7 +3764,7 @@ export class ThinNativeEngine extends ThinEngine {
      * Create a canvas
      * @param width width
      * @param height height
-     * @returns ICanvas interface
+     * @returns INativeCanvas interface
      */
     createCanvas(width, height) {
         if (!_native.Canvas) {
@@ -3819,9 +3863,36 @@ export class ThinNativeEngine extends ThinEngine {
         throw new Error("_uploadArrayBufferViewToTexture not implemented.");
     }
     getFontOffset(font) {
-        // TODO
-        const result = { ascent: 0, height: 0, descent: 0 };
-        return result;
+        // Match the browser's font line box for GUI layout, not just the ink in "Hg".
+        // Older Canvas runtimes may expose only glyph bounds.
+        try {
+            if (!this._fontMeasureContext) {
+                // Keep a canvas whose context failed so retries never orphan it before engine disposal.
+                this._fontMeasureCanvas ?? (this._fontMeasureCanvas = this.createCanvas(64, 64));
+                this._fontMeasureContext = this._fontMeasureCanvas.getContext("2d") || undefined;
+            }
+            const context = this._fontMeasureContext;
+            if (!context) {
+                throw new Error("2D canvas context is unavailable");
+            }
+            context.font = font;
+            const metrics = context.measureText("Hg");
+            const ascent = Number(metrics.fontBoundingBoxAscent ?? metrics.actualBoundingBoxAscent);
+            const descent = Number(metrics.fontBoundingBoxDescent ?? metrics.actualBoundingBoxDescent);
+            if (isFinite(ascent) && isFinite(descent) && ascent + descent > 0) {
+                return { ascent, height: ascent + descent, descent };
+            }
+        }
+        catch (error) {
+            Logger.Warn(`Native font measurement failed; using an estimated line height: ${String(error)}`, 1);
+        }
+        // No canvas or an unmeasurable font: approximate from the CSS px size the same way the
+        // shared GetFallbackFontOffset does, so text still gets a sane non-zero line height.
+        const match = /(?:^|\s)([0-9]+(?:\.[0-9]+)?)px(?:\/|\s|$)/.exec(String(font || ""));
+        const size = Math.max(1, match ? parseFloat(match[1]) : 12);
+        const ascent = size * 0.8;
+        const descent = size * 0.2;
+        return { ascent, height: ascent + descent, descent };
     }
     /**
      * No equivalent for native. Do nothing.