Babylon GUI Preview throws error on getFontOffset

Hey guys i’ve been making a small program with Babylon for a few months now. Today the preview cdn for the GUI build has broken as far as i can tell.

Even if i copy a basic playground sample with a single button with text it will throw the following error. Uncaught TypeError: i.getFontOffset is not a function.

Im very new to Babylon and nodejs, so it was an easy way to just include the cdn scripts in the html and write what i need in another script.
(Can’t seem to figure out how to serve it with Express + webpack).

Is anyone else able to confirm that the min GUI package is broken?
https://preview.babylonjs.com/gui/babylon.gui.min.js

html

<head>
    <meta charset="utf-8"/>
    <title>System</title>
    <style>
        html, body {
            overflow: hidden;
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }

        #renderCanvas {
            width: 100%;
            height: 100%;
            touch-action: none;
        }
        #fps {
                position: absolute;
                background-color: black;
                border: 2px solid red;
                text-align: center;
                font-size: 16px;
                color: white;
                top: 15px;
                right: 10px;
                width: 60px;
                height: 20px;
            }
    </style>
</head>
<body>
    <script src="https://cdn.babylonjs.com/babylon.max.js"></script>
    <script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
    <script src="https://preview.babylonjs.com/gui/babylon.gui.js"></script>
    <canvas id="renderCanvas"></canvas>
    <div id="fps">0</div>
    <script src="test.js"></script>
</body>
</html>

test.js

window.addEventListener('DOMContentLoaded', async () => {
	const canvas = document.getElementById('renderCanvas');
	const engine = new BABYLON.Engine(canvas, true);
    // This creates a basic Babylon Scene object (non-mesh)
    var scene = new BABYLON.Scene(engine);

    // This creates and positions a free camera (non-mesh)
    var camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(0, 5, -10), scene);

    // This targets the camera to scene origin
    camera.setTarget(BABYLON.Vector3.Zero());

    // This attaches the camera to the canvas
    camera.attachControl(canvas, true);

    // This creates a light, aiming 0,1,0 - to the sky (non-mesh)
    var light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);

    // Default intensity is 1. Let's dim the light a small amount
    light.intensity = 0.7;

    // Our built-in 'sphere' shape.
    var sphere = BABYLON.MeshBuilder.CreateSphere("sphere", {diameter: 2, segments: 32}, scene);

    // Move the sphere upward 1/2 its height
    sphere.position.y = 1;

    // Our built-in 'ground' shape.
    var ground = BABYLON.MeshBuilder.CreateGround("ground", {width: 6, height: 6}, scene);
	
	// GUI
    var advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("UI");

    var button1 = BABYLON.GUI.Button.CreateSimpleButton("but1", "Click Me");
    button1.width = "150px"
    button1.height = "40px";
    button1.color = "white";
    button1.cornerRadius = 20;
    button1.background = "green";
    button1.onPointerUpObservable.add(function() {
        alert("you did it!");
    });
    advancedTexture.addControl(button1); 

	//Start Render Loop
	engine.runRenderLoop( () => {
        scene.render();

        //-----------------------Debug FPS----------------------------//
   		var divFps = document.getElementById('fps');
		divFps.innerHTML = engine.getFps().toFixed() + " fps";
		//-----------------------------------------------------------//
    });
})

Omit the advancedTexture and button and it will work.

Thanks

1 Like

I have the same problem. I came back to my project after few days and all my GUI elements are gone… Have you find any solution?

You should not mix cdn and preview to retrieve packages.

Your sample does work in the PG (I copy/pasted your code):

https://playground.babylonjs.com/#TJPM7U

1 Like

Is there a CDN version of the GUI? I’ve been looking. Once i figure out how to utilize Webpack with Express to compile and serve the npm version of babylonjs to the browser i’ll be switching.

Yes, simply replace preview by cdn in the url:

https://previewcdn.babylonjs.com/gui/babylon.gui.js

1 Like

Yeah, i feel like an idiot. I glanced over it lastnight. I revisited the cdn page and it was staring me in the face. I thought it was strange before that there were cdn’s for everything but the gui.
Thanks for your help anyway.

1 Like