Render SpriteMap to scene Layer

Hi, the intro might be long winded to avoid xy problem solving so please bear with me :slight_smile:

Situation
I have a terminal emulator written for Canvas2D. Simple api, draw glyph at x,y coord with foreground and background colour. I then take this canvas and use it to update a DynamicTexture (The canvas comes from the DynamicTexture). The DynamicTexture is then used for a scene Layer. This gives me a GUI for menus and a HUD during gameplay. The fonts are bitmap fonts in the CodePage 437, see examples here.

I’ve used this terminal emulator both in and out of Babylon.js and have a whole TextMode-ImmediateModeGUI library to give me capabilities close to the old Borland Turbo Vision GUIs.

Problem
However Canvas2D creates a bottleneck on the main thread. If the emulated terminal is too large, or too many cells need to be updated it will create frame stutter. I want to improve the render performance of my TextGUIs. Canvas2D seems to be the final bottleneck.

Possible Solution?
My first thoughts are to reimplement the Terminal Emulator API and use SpriteMaps for the rendering of the glyphs. I’m given to understand that the render performance will be some orders of magnitude, but how will I be able to get the SpriteMap to act as a GUI Layer?

Is using SpriteMaps the right direction or is there some other technology I’ve missed?
I am very interested in your thoughts!
Thanks!

An example of the TMGUI:


An example of a full screen terminal game (Roguelike)

@Cedric who is a huge fan of some gui project might have some ideas

I would try Sprite Map Tile Layout | Babylon.js Documentation
First, I would add all my characters in a spritemap, then I would do a performance test:
For a 40x25, for example, terminal size, change randomly each character and see the performance difference between canvas2D and spritemap.
Or even with a bigger size so the performance difference would become self evident.