Clone images to add to grid

Hi, I’m sorry that I am addressing, whoever can help)), I have images of all the letters of the alphabet from which I then collect the text. I do this using the grid element. I load images this way new BABYLON.GUI.Image (). But there is a problem, when I need to update the text, when using such a construction BABYLON.GUI.Image (),
will force the engine to reload the symbol image again, which is unnecessary. If I load all the symbols in advance and save them in an array, then when I try to add the same symbol to the grid, the engine will throw an error “is already associated with this grid. You must remove it before reattaching it”.
On computers and phones with the operating system, the android approach to create and upload a new image works without problems, on phones with the ios operating system this causes a drawdown in fps, I can see how the letters slowly appear on the screen, which I want to avoid by downloading the entire alphabet without loading new letters.

Worth a look - In the GUI you can use SVG Icon Sheet for your image of letters


Hi, thanks for the reply. That is, the main condition here is this: Known issue: The batch loading process requires the entire SVG icon sheet to be loaded as a HTMLObjectElement in the DOM. As I understand it, after svg is loaded I can create images from it in this way:

var b1 = new BABYLON.GUI.Image(“b1”, “textures/gui/bjs_demo1.svg#bjs_button_bg”);

Where is the “textures / gui / bjs_demo1.svg” path to svg
“bjs_button_bg” - image id in svg “textures / gui / bjs_demo1.svg”

By creating images this way babylon will take svg from cache? That is, no extra. downloads will be gone, right?


1 Like