FullScreen UI with ScrollViewer performance

Questions
1

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.

Screenshot from 2019-12-16 15.24.43
Screenshot from 2019-12-16 15.24.431188×821 227 KB
Screenshot from 2019-12-16 15.25.04
Screenshot from 2019-12-16 15.25.041188×819 202 KB

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?

2

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
3

No plan for VR

4

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
5

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

6

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

7

Yes as we will focus on improving perf of the scrollviewer

1 Like
8

Can you help by creating a repro maybe?

1 Like
9

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
10

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

11

Yes i will create one

12

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:

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

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

14

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

15

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

16

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

17

Fantastic

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

18

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.