Wrong GUI.AdvancedDynamicTexture.CreateFullScreenui documentation?

Bugs
1

I’m not quiet sure, if i use the class correct, but the docs state:

https://doc.babylonjs.com/api/classes/babylon.gui.advanceddynamictexture#createfullscreenui

everyhting except ‘name’ attribute is optional. But this is wrong.

Assume:

let advancedTexture = GUI.AdvancedDynamicTexture.CreateFullscreenUI("test");

This errors in:

TypeError: _this.getScene(…) is null

in “<.>/sourceES6/core/Materials/Textures/dynamicTexture.ts:35”

@babylonjs/@* versions 4.1.0

Otherwise I do not understand the documentation. May someone can point me to a recommended usage example.

let advancedTexture = GUI.AdvancedDynamicTexture.CreateFullscreenUI("test", true, scene); is of course working for me.

Thank you

1 Like
2

Documentation : Use the Babylon GUI - Babylon.js Documentation

Here is the relevant playground : https://www.babylonjs-playground.com/#XCPP9Y#1 .

Seems like there is not needed a reference of the scene. What version of BJS are you using?

3

Hi!

So I wonder why it doesn’t work in my case as in the playground.
I use babylon 4.1.0 with react as shown by this example code: How to use Babylon.js with ReactJS - Babylon.js Documentation

onSceneMount = (e: SceneEventArgs) => {
    const { height, width } = this.state.windowDimension;
    const { canvas, scene, engine } = e;

    let camera = new BABYLON.ArcRotateCamera("Camera", -Math.PI / 2, 1.0, 110, BABYLON.Vector3.Zero(), scene);
    camera.setPosition(new BABYLON.Vector3(0, 0, -250));
	camera.attachControl(canvas, true);

	let hemi = new BABYLON.HemisphericLight("toto");

	console.log("engine starting");

	let sphere = new BABYLON.Mesh.CreateSphere("Sphere", 10.0, 9.0, scene );
	sphere.name = "THIS IS AN EXAMPLE NODE";

	let advancedTexture = GUI.AdvancedDynamicTexture("test",width,height,scene); <-- Another Error?
    //another test
    //let advancedTexture2 = advancedTexture.CreateFullscreenUI("test"); 
	let optionswrapper = new GUI.Rectangle("label for " + sphere.name);
    optionswrapper.height = "30px";
    optionswrapper.width = "100px";
    optionswrapper.thickness = 20;
    optionswrapper.linkOffsetY = -30;
    optionswrapper.isVisible = true;

    advancedTexture2.addControl(optionswrapper);
    optionswrapper.linkWithMesh(sphere);

    engine.runRenderLoop(() => {
        if (scene) {
            scene.render();
        }
    });
}

Even this code shows:

TypeError: setting getter-only property “name” for let advancedTexture = GUI.AdvancedDynamicTexture("test",width,height,scene); in <.>/sourceES6/core/Materials/Textures/texture.ts:283

here are my installed babylon dependecies:

“@babylonjs/core”: “^4.1.0”,
“@babylonjs/gui”: “^4.1.0”,
“@babylonjs/inspector”: “^4.1.0”,
“@babylonjs/loaders”: “^4.1.0”,
“@babylonjs/materials”: “^4.1.0”,
“@babylonjs/post-processes”: “^4.1.0”,
“@babylonjs/procedural-textures”: “^4.1.0”,
“@babylonjs/serializers”: “^4.1.0”,

Any idea what I may do wrong?

EDIT:
My import looks like this:

import * as BABYLON from ‘babylonjs’;
import * as GUI from ‘@babylonjs/gui’;

4

Pinging @sebavan

5

I tried

var advancedTexture = GUI.AdvancedDynamicTexture.CreateFullscreenUI("UI");

with this babylonjs-gui - npm package.

So. instead of import * as GUI from ‘@babylonjs/gui’;
I use now: import * as GUI from 'babylon-gui';

which makes it working, but the next problem I don’t understand here is, that:

let optionswrapper = new GUI.Rectangle("label for " + sphere.name);
    optionswrapper.height = "30px";
    optionswrapper.width = "100px";
    optionswrapper.thickness = 20;
    optionswrapper.linkOffsetY = -30;
    optionswrapper.isVisible = true;

    advancedTexture2.addControl(optionswrapper);
    optionswrapper.linkWithMesh(sphere);

is just shown after I resize my browser window.

Can anybody explain that behavior and how I can fix it so the Rectangle is shown after the first render?

6

This is my current code:

It works in my browsers if I resize them after first loading.

In the sandbox you can also see my issue if you exchange the import lines to:

//import * as GUI from “@babylonjs/gui”;

7

Could you share a repro on Github as this one should definitely work ?

this should definitely work:

import { AdvancedDynamicTexture } from "@babylonjs/gui";

let advancedTexture = AdvancedDynamicTexture.CreateFullscreenUI("test", true, scene);
8

https://github.com/fneitzel/babylonjs_gui_4.1_issue.git from codeSandbox above

import { AdvancedDynamicTexture } from "@babylonjs/gui";

let advancedTexture = AdvancedDynamicTexture.CreateFullscreenUI("test", true, scene);

This works.

But

import { AdvancedDynamicTexture } from "@babylonjs/gui";
let advancedTexture = AdvancedDynamicTexture.CreateFullscreenUI("test");

does not.

if I use:

import { AdvancedDynamicTexture } from "babylonjs-gui";
let advancedTexture = AdvancedDynamicTexture.CreateFullscreenUI("test");

it works.

Also rendering this:

optionswrapper.linkWithMesh(sphere);

just happens on rerender.

Thank you for your time!

9

My rerendering problem is solved, see:

Now it is still not clear to me, why this doesn’t work:

import { AdvancedDynamicTexture } from "@babylonjs/gui";
let advancedTexture = AdvancedDynamicTexture.CreateFullscreenUI("test");
1 Like