FPS change in full screen

I tried in other browsers and it happened too.

full display :

Hello :slight_smile:

Physics put appart, when triangles are covering the full canvas, the GPU render time can be relatively linear with surface.

In your case you are going from 1920x958 to 1920x1080 which is a +12.7% surface.
So starting from 144 fps, it makes sense to loose an average of 18 frames per second, I would say.

appear that something in UI cause the drop :
I removed part of GUI :

i saw the problem today, but normally it runs at 144 FPS, i not use video (OBS) for this topic because it cause a drop too.

rotating this image causes it :

const bgRadarSignal = new BABYLON.GUI.Rectangle("mm_bgRadarSignal");
    bgRadarSignal.width = "80px"; // Ancho completo de la pantalla
    bgRadarSignal.height = "80px"; // Altura arbitraria
    bgRadarSignal.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_CENTER;
    bgRadarSignal.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_CENTER;
    bgRadarSignal.top = "-129px";
    bgRadarSignal.thickness = 0;
    mm_image_radar = new BABYLON.GUI.Image("mm_image_radar", "IMGS/radar_signal.png");
    mm_image_radar.rotation -= 0.1;
    bgRadarSignal.addControl(mm_image_radar);
    
    menu_ui_main_menu.addControl(imageRectangle);
    menu_ui_main_menu.addControl(bgRectangle);
    menu_ui_main_menu.addControl(bgRadarSignal);

rotating in update/loop :

class Game {
//...
loop() {

    if( gb_paused )return;
    // game.deltaTime = scenes[active_scene].deltaTime;
    game.subtract = game.deltaTime / Game.DELTA_TIME;
   
    switch (active_scene) {

      case SC_LANGUAGE:
      case SC_MENU:
        
        if( gb_ui_active == SC_MENU ){
          // console.log( "aqui rotar radar" );
          fps_text_ui.text = engine.getFps().toFixed() + " fps";
          mm_image_radar.rotation -= 0.01;

          if ( game.light_station.loaded ) {
            
            for (let _k = 0; _k < TOTAL_RAPTORS_IN_MENU; _k++) {                    
              raptors[_k].update();
            }

            for (let _k = 0; _k < this.asteroids.length; _k++) {  this.asteroids[_k].update(); }

          }
        }

        if( gb_ui_active == SC_SETTINGS ){
          mm_image_radar.rotation -= 0.01;
        }

        


      break;

      case SC_STORE:
        
      break;

      case SC_PLAYING:
      
       
      break;//fin escena playing

      
    }//fin swicht scenes

  } //fin del loop /end of loop

}//end of class

maybe there are other method to rotate it ?

Did you try to hit F5 (reload) after you are in fullscreen ?

yes sr, same.

I think it’s strange that the GUI rotation is causing this, while only in FullScreen :thinking: . I mean, I can understand than the rotation could cost compute, but, why only in fullscreen ? :thinking:

I was asking about the F5 because, for example GUI could had a bug where images was loaded at the right size (before you go FullScreen) and then when you are fullscreen it would run a resize on each frame, or something like this…

1 Like

disablig rotation :

maybe is another thing, because in next scene (GAMEPLAY) the drop continues.

This is expected as GUI is full screen and there is a copy of a canvas2d into a texture every frame which is then rendered back in the webgl space…

I would advice to refrain on using GUI in this case and see to use a webgl based solution if possible.

After a huge review, i removed greased lines with glow (sparks at explodes) and the FPS returned to normal values.

GUI over WebGL …?

@sebavan what do you mean exactly by “this case” ? Do you mean rotating images, or using FullScreen GUI in FullScreen mode ? :slight_smile:

You can render tens of thousands of lines using GreasedLine at high FPS.

yesr sr, exuse me, greased line with glow effect…

the same story :slight_smile: never mind…

Soon I can do a test in playground, for now I must prioritize progress in development. :slightly_smiling_face:

high frequency update of the gui layer (every frame here due to the rotation)

1 Like