Using advanceddynamictexture.createformesh causes the browser to crash

Questions
1

I need to create UI on top of many mesh, but I just loop through 20 browsers and it crashes.

2

Advanceddynamictexture.createformesh performance is too poor.

3

I may not get the information you want to convey correctly. Can you express it through the playground？:frowning:

6

https://www.babylonjs-playground.com/#ZI9AK7#453
When created,The browser has 5 seconds of no response.

7

First, the number of AdvanceDynamicTexture(ADT) is 500, and not send size. Mean that, there is 2G RAM used for canvas (1024 * 1024 * 4 * 500 byte).

Multiple buttons can be added to the same ADT.

From my experience,

  • Most UI systems use Canvas2D solutions. The feature of high performance consumption is indeed the limitation on the number of UIs and the frequency of updates
  • Maybe Pixi.js can take better performance. But still will not use too much canvas (or FrameBuffer)
  • One of my projection, use one ADT(1024 * 1024) for 100 button(50 * 88)
8

I think you already posted on another thread, would be nice to keep only one thread per issue.

It is normal that it is slow but as explained on the other thread I wonder if the design or approach could be improved to not require as many dynamic texture. It sounds strange to me that you need as many.

9

image
image1467Ă—885 76.5 KB

I need to label each cabinet; a minimum of 500 cabinets is required. Is there a better solution.

10

The real operating environment is 60x60.
Can pixi.js be used with babylonjs? Do you have a learning URL?

11

@zhang maybe this will help :smile:
(ignore the title)

12

500 has little effect on FPS, but the browser does not respond when it is created. It’s curious that it can’t use setTimeout.

13

But it changes size with the camera. This may not be what I want.

14

Now I use babylon.dynamictexture and find that the creation time of hasalpha = true and hasalpha = false is quite different.

15

Simple Demo: https://www.babylonjs-playground.com/#KX33X8#148

1 Like
16

Using SPS for lables https://www.babylonjs-playground.com/#6WSFI8#1

You could use SPS for the cabinet boxes as well.

2 Likes
17

I have been experimenting a bit with SPS and it is super performant so it is a way to go. But main problem still reminds with browser “hanging” effect while generating either many textures or massive sprite sheet. I think doing it more asynchronously would be more user friendly.

Instead of generating everything at once we could do just few at the time during each render call. There are couple of big advantages of this approach:

  • Firstly, preventing browser from choking trying to handle everything at once
  • Secondly, that would have reduce the impact on frame rate of main scene

User wouldn’t be able to see it initially but surely that is far more graceful than black screen and/or unresponsive browser.
Alternative might be scheduling using OffscreenCanvas on a separate webworker thread.

https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas

18

Offscreen canvas are supported in Babylon: Offscreen Canvas | Babylon.js Documentation

Demo: Babylon.js - Worker mode