Using Babylon GUIs in projects and Playgrounds

Questions
1

Over the last couple of weeks I’ve been using the Babylon GUI system to quickly add start/play buttons and I noticed short impacts on the fps rate in scenes. Image 1 and 2 (just the data and pointer) is an example - a scene which has just a single button. It shows the scene with the mouse pointer outside of the button and the fps at 60 fps.

Now making the mouse go in and out - “hovering” over the button - the fps drops to 58 (Image 3) and actually clicking the button and the fps drops to 56 (Image 4).

These fluctuations are brief but are happening when the button is involved, and happen in Firefox but not Chrome.

Any thoughts?

Stay Safe All, gryff :slight_smile:

Image 1:

gui_fps01
gui_fps01957×858 136 KB

Image 2: Close Up of data from Image 1
gui_buttons01

Image 3 : Hovering :
gui_buttons02

Image 4 Clicking :
gui_buttons03

2

Cc @DarraghBurke

4

What resolution are you rendering the UI at? Depending on the texture size if it has to redraw the adt then it could definitely cause a fps drop depending on the clients available video memory and the fact you see it in chrome not firefox could just be a hiccup of how the fps is measured.

5

@Pryme8 : Actually I see the fluctuations in Firefox but not Chrome. But that is why I asked for “Any thoughts” as I thought it might some browser difference rather than an issue with BJS GUI. I even spent 30+ mins, yesterday going over the YouTube video that @msDestiny14 posted.

My video card is NVidia GTX 1060 with 6GB Ram, screen resolution 1920 x 1080

The drop in fps is very very brief - goes back to 60 fps as soon as the scene continues. I noticed it and am curious.

Stay Safe, gryff :slight_smile:

1 Like
6

I bet its the redraw of the adt just causing a blip. Ive done lots of work with it on projects and its a common problem. Not sure how much can be done about it except trying to render it at half res and see if you still have the issue.

7

I am surprised though - the GUI is pretty simple, I would not expect a few canvas drawing operations to exceed 16ms. An easy way to confirm this - can you (@gryff) try creating a rectangle and then change the color of that rectangle, on a timer or maybe bound to a keyboard event? I want to see if the slow down repros. It’s possible there’s something in the pointer handling that’s causing issues

8

@DarraghBurke : Well here is the example that I think you want which I created by adding this code:

// restart animations from keyboard with “s”
myScene.onKeyboardObservable.add((kbInfo) => {
switch (kbInfo.type) {
case BABYLON.KeyboardEventTypes.KEYDOWN:
switch (kbInfo.event.key) {
case “s”:
if(trigger === 1){

  									trigger = 2;
  									whichAnim = myScene.beginAnimation(skeleton, speakRange.from, speakRange.to, true, 1);
  									kryten.play();
  									button1.background = "black";
  									//button1.isVisible = false;		
  								}
  				
  								break;
  							case "default":	
  								break;
  							}
  					break;			
  				}
  			});

The sound and animation are triggered by hitting the “s” key and there is a line that just changes the background color of the button : “button1.background = “black”;” The result is shown in Image 1., The hover effect on the button is still there, and I also tried “button1.isVisible = false” - same result.

Without a line of code that changes a button property - the fps does not change

Here is a Playground where I’m seeing the same effect - but it has more than one button.

A Playground

Only in Firefox, very brief change - maybe it is not important?

Stay Safe, gryff :slight_smile:

Image 1 :

gui_buttons04

9

This is really weird, when I replace the button with a rectangle and text block, I don’t see the FPS drop: https://playground.babylonjs.com/#WZNAU4#43

But I do see it with the Button. To be honest, I have no idea what could be causing this, as the button is basically just a tiny wrapper over rectangle and text block.

If it’s only a small FPS drop, I don’t know if it’s a huge priority to investigate right now, but it still does strike me as very weird. Can you confirm if the PG I linked fixes the perf issue for you?

1 Like
10

@DarraghBurke Yes when I click the yellow squares no drop in FPS but the appearance of text at bottom of screen only appears with the “stop” square. I can’t get the other two possible messages…

As you can see from my posts here today - I seem to be having issues with Firefox:

FireFox and Chrome

So don’t let it interfere with your more important work.

Stay Safe, gryff :slight_smile: