Creating a GUI Button results in missing engine error

Bugs
1

Hello, I want to add a GUI Button control to my scene. Since I am writing a library I don’t have a playground for this. The code can be found here for the button: svelte-babylon/index.svelte at gui · Myrmod/svelte-babylon · GitHub (that’s the line that causes the error). The context in this line is created in svelte-babylon/index.svelte at gui · Myrmod/svelte-babylon · GitHub The error is as follows

Error: Invalid engine. Unable to create a canvas.
    at Function.Control2._GetFontOffset (control.ts:2331:19)
    at TextBlock2._processMeasures (textBlock.ts:296:40)
    at TextBlock2.Control2._layout (control.ts:1675:22)
    at Button2.Container2._layout (container.ts:383:31)
    at e2._layout (babylon.gui.min.js:16:52932)
    at e2._render (babylon.gui.min.js:16:244671)
    at e2._checkUpdate (babylon.gui.min.js:16:244325)
    at r.callback (babylon.gui.min.js:16:235329)
    at e2.notifyObservers (babylon.js:16:17906)
    at t2._renderForCamera (babylon.js:16:270839)

I wanted to replicate this: https://www.babylonjs-playground.com/#XCPP9Y#1

// controls.ts:2331:19
public static _GetFontOffset(font: string): { ascent: number; height: number; descent: number } {
        if (Control._FontHeightSizes[font]) {
            return Control._FontHeightSizes[font];
        }

        const engine = EngineStore.LastCreatedEngine;
        if (!engine) {
            throw new Error("Invalid engine. Unable to create a canvas.");
        }

        var result = engine.getFontOffset(font);
        Control._FontHeightSizes[font] = result;

        return result;
    }

Any suggestions on how to solve this issue?

EDIT:
Logging the engine right before calling gui.addControl(control) using

const engine = EngineStore.LastCreatedEngine
console.log(engine, engine.getFontOffset('Arial'))
gui.addControl(control) // here the error is being thrown

shows me the expected values. So I assume it’s a bug of some kind?

2

This could be related to how the bundle has been created, I suspect either the use of incompatible versions of babylon in your npm package.json. Could you share it with us ?

Basically here, you have 2 versions of the shader store, so probably two versions of babylon/core or babylon/core and babylonjs

3

All versions are ^5.0.0-alpha.65 and can be found here svelte-babylon/package.json at gui · Myrmod/svelte-babylon · GitHub

4

Weird… maybe @RaananW will have an idea ?

5

It seems to not reproduce on the playground.
Have you tried using the latest rc.3 ? is it still failing?

1 Like
6

I just switched to it, seems like this was the problem. I thought I was on the latest available version. Could you give me a link on where I can see the latest available version, since it seems I have looked at the wrong place before.

Thanks a lot :slight_smile:

1 Like
7

@Myrmod , npm should always have the latest version.

You can check the release version under the “Versions” tab at:

babylonjs - npm (npmjs.com)

1 Like