GUI Performance

[Ericky14]

Hello,

I am trying to use the GUI TextBlock and Image components to display an icon and a text underneath it (number count) on top of a hexagon.

In the scene, there can be hundreds of hexagons at once. Without instantiating the GUI components, the scene runs with no much problem at all, 200~ hexagons at 60fps... With it, the fps drops considerably.

Is there any GUI optimization advice you guys can give me? I would appreciate it.

constructor(parentHex, text, sizeScale, icon) {

if (global.Image) {

const GUI = require('babylonjs-gui');

 

const materialType = MATERIAL_TYPES.DYNAMIC_LABEL;

const name = `hex_label_plane_${sizeScale}`;

let plane = Main.scene.getMeshByName(name);

 

if (!plane) {

plane = BABYLON.MeshBuilder.CreatePlane(name, { size: 1.1 * sizeScale }, Main.scene);

Util.setMaterial(plane, materialType);

Util.setScalingToZero(plane);

}

 

plane = plane.clone('clone');

plane.position = Util.getNewVector(parentHex.position);

plane.position.y += (parentHex.extents.y * Config.HEX_Y_SCALE) + 0.01;

plane.rotation.x = Math.PI / 2;

 

Util.setScalingToOne(plane);

plane.setParent(parentHex);

plane.originalScaling = Util.getNewVector(plane.scaling);

 

plane.setVisibility = (visible) => {

visible ? Util.setScalingToZero(plane) : Util.resetScaling(plane);

};

 

const panel = new GUI.StackPanel();

panel.verticalAlignment = GUI.Control.VERTICAL_ALIGNMENT_CENTER;

this._panel = panel;

 

if (icon) {

const image = new GUI.Image('hexLabelIcon', icon);

image.height = `${Config.HEX_LABEL_ICON_HEIGHT / sizeScale}px`;

image.paddingBottom = `${Config.HEX_LABEL_ICON_PADDING_BOTTOM / sizeScale}px`;

image.verticalAlignment = GUI.Control.VERTICAL_ALIGNMENT_BOTTOM;

image.stretch = GUI.Image.STRETCH_UNIFORM;

panel.addControl(image);

}

 

const textBlock = new GUI.TextBlock(`hex_label_${text}`, text);

textBlock.height = `${Config.HEX_LABEL_FONT_SIZE / sizeScale}px`;

textBlock.color = 'black';

textBlock.fontSize = `${Config.HEX_LABEL_FONT_SIZE / sizeScale}px`;

textBlock.textVerticalAlignment = GUI.Control.VERTICAL_ALIGNMENT_TOP;

panel.addControl(textBlock);

 

this.advancedTexture = GUI.AdvancedDynamicTexture.CreateForMesh(plane);

this.advancedTexture.addControl(panel);

 

return plane;

}

}

[jerome]

Do you really need to create a new texture (GUI) per plane ? Do the planes have all the same text in the same time or each a different text ?

[Ericky14]

They all have different texts. I just repeated them on the picture to do a quick stress test.

Is there any way I can clone or re-use dynamictexture only changing the text?

[Dad72]

Yes it should be possible.

[GameMonetize]

Whatever technique you use, you will need different texts for each hexagon.

But I would suggest using only a small limited amount of GUI textures. You can then create a big texture and add multiple texts in it (like sprites)

[Ericky14]

@Deltakosh I am trying to generate groups of texts for a single group of many cylinders as a single plane with GUI texture. But, I can't figure out how to translate the babylonjs coordinates to texture coordinates (left/top properties). Would you happen to know how that's done? Thanks.

[GameMonetize]

Hello, no problem:

https://www.babylonjs-playground.com/#IZACWJ

You can play with UVs values to select which part of the texture you want to display

[Ericky14]

What I meant is how I can have one big texture over multiple meshes which lay on the same Y level and that one big texture have multiple texts positioned on top of each mesh.

[GameMonetize]

This is what I tried to explain on my sample. YOu can have one big texture and then update meshes' UV to pick the correct text into that big texture