FullScreen UI with ScrollViewer performance

I am working on a 2d/3d view for racks in a data center and I implement both views using 2 different scenes and used SPS for creating the racks in 3d for better performance for the 2d view I used a fullscreen texture with one ScrollViewer and one rectangle inside it then I created racks using a mix of Rectangle control and StackPanel control but the performance of scrolling is not usable with many racks example 100 racks.
NOTE: I used useBitmapCache for every control I created but no difference.

So do you have a better way to implement this 2d view or how to optimize my current implementation to be usable at least with 1K racks and each rack contains 50 devices?

With that number of racks, I would recommend to use DOM if possible (Do you plan to use it in VR?)

The ScrollViewer does not implement virtualization unfortunately

1 Like

No plan for VR

Ok so maybe you have options:

  • Use DOM element (HTML+CSS)
  • Setup virtualization in the scrollviewer
  • Wait for an upcoming update of the scrollviewer we are working on :wink:
1 Like

Do you think this upcoming update will help me :smiley: and if I am gonna implement virtualization is it really complex considering that I don’t have enough WebGL knowledge.

Also, let’s say that I implemented virtualization do you think it will perform better than DOM or PIXI.

Thanks @Deltakosh

Pixi could be a good idea
I have no idea how it will compare with PIXI but I feel like DOM will be faster with a lot of elements

Yes as we will focus on improving perf of the scrollviewer

1 Like

Can you help by creating a repro maybe?

1 Like

FYI @salamaashoush - I created a related issue #7341. Whenever you have time to create a repro, please make sure to link it back here or on the issue.

1 Like

Sorry fr my late response i will create a repo and link it to this issue , Thanks @thomlucc

Yes i will create one

Hi. Even for doms 1k elements is alot and you should use some optimizations (like css layers and cpr optimization principles)
For babylon you may try yo use useBitmapCache property to cache big containers and maybe it will help.
It should be used as follows:

├ {n}Control [usebitmapcache]
│├ … Lots of childs

Again. That how it have to work if it was made properly. @Deltakosh , what would you say?

Here is the code i used to render 2d view mentioned in the post typescript-qlkymb - StackBlitz @Deltakosh @thomlucc

I did exactly what you mentioned but still same issue, take a look at this code typescript-qlkymb - StackBlitz

Thanks a lot for the repro, @Deltakosh will be back on Monday and I bet he will sort it in no time :slight_smile:


Pinging @thomlucc as this is the perfect example for this Performance improvements for ScrollViewer · Issue #7341 · BabylonJS/Babylon.js · GitHub

Thanks @salamaashoush for the repro ! We are working to find some help on this Performance improvements for ScrollViewer · Issue #7341 · BabylonJS/Babylon.js · GitHub and I’ll keep this thread updated on the topic.