When drawing a large number of objects in a GUI.Container and performing container movement, the performance becomes very sluggish

Questions
1

When creating a game, placing a large number of images in a container and dragging them causes significant latency。

2

Hi @zxcvbzxcvb5555 and welcome to the forum

10000 GUI Rectangles is a lot. In term of creation processing time/memory/rendering/… It’s too many!
I think you should try another way to get this rendering. what is your use case?

3

I will create a Container for each mini-game to keep track of wins and losses. Each Container will contain a large number of images representing the statistics of each win or loss. Ultimately, the outermost layer needs to be draggable vertically.

4

Please keep in mind that GUI utilizes a 2D Canvas CanvasRenderingContext2D - Web APIs | MDN (mozilla.org) which can really struggle with drawing lots of elements. In a scenario like this, I highly recommend using 3D planes and textures/shaders instead, as they can take advantage of instancing ( Instances | Babylon.js Documentation (babylonjs.com)) to achieve much better performance.

You can see an example of such here, where I compare the use of GUI vs the use of a Node Material Shader for dynamically updating billboards: Counters with GUI and billboard instances | Babylon.js Playground (babylonjs.com). The approach with GUI hovers over 40 FPS, and increasing the number of objects will quickly make it run out of memory, while the shader approach achieves a solid 60FPS.

1 Like
5

image
image790×290 76.4 KB

I’m not very familiar with shaders, so I’d like to ask if it’s possible to achieve a setup like the one in the provided image using LayaAir’s List and Panel components. In this setup, I used small images to create multiple cells and placed various content inside each cell. The data inside the cells is constantly changing, sometimes requiring the addition of new images for display or replacement. Finally, all the cells are placed within a Panel to enable smooth dragging without any lag. Is it possible to achieve this setup?

6

Yep it is! You can pass custom data to shaders, so you can use that data to indicate which panel should be drawn for every cell in the grid. One common way to pass the data is using textures, since you can change their size as you please. It’s a bit of a different way of thinking, using textures to pass data, but it’s very useful: Use texture to pass data to a shader | Babylon.js Playground (babylonjs.com)