How to clear a DynamicTexture

Questions
,
1

Hi!

I’m working on some changeable text on a canvas. Where I need to reset it between calls to texture.drawText(). As I understand it, I can call texture.clear() to do this. But this only ‘clears’ the canvas to black. After some digging I found out that texture.clear() just calls a fillRect, which depends on the canvas.fillStyle.
When I set this before calling texture.clear() it does ‘clear’ the texture in that color. The problem is that I can’t seem to set any alpha value on canvas.fillStyle

I understand that this part is still being worked on, so I tried to look for a workaround and found the canvas.save() and canvas.restore() functions. Unfortunately, saving the canvas before my first drawText and then restoring it after doesn’t seem to do anything either.
I also tried first setting texture.hasAlpha = true; but I got nothing.

I know it has to be possible to ‘fill’ the canvas with a transparent color, because when I create the DynamicTexture with ‘transparent’ as the clearColor it is transparent. But besides recreating the entire DynamicTexture with every change (which I also tried but it gets glitchy) I haven’t found a way to do it.

So I guess my question is just, how do I clear a DynamicTexture back to being completely transparent?

These are the versions I’m on:
“@babylonjs/core”: “5.0.0-alpha.65”,
“@babylonjs/gui”: “5.0.0-alpha.65”,
“@babylonjs/loaders”: “5.0.0-alpha.65”,
“@babylonjs/react-native”: “0.4.0-alpha.47”,

2

I do a lot of text generation and changing for my project, can you explain what the requirements are?
Are you getting a transparent background the first time?

3

Sure! I just have a textbox somewhere else on the page that I use to change the text I want to render on this texture. I also have some tools to change the fontsize to scale the text. And I’m trying to get the text to rerender on every change from those.
I am getting a transparent background the first time, I just can’t figure out how to return to that.

4

I see. I do do a lot of just regenerating the textures, but yeah it might be faster to update it!

I think this should do it:

ctx.fillStyle = '#000000' + '01';
ctx.fillRect(x, y, width, height);
5

Thanks for the suggestion! I tried it, but unfortunately I get the same error I got when trying other ways of setting transparency there:
Error: Exception in HostFunction: Unknown color name

6

oh, that is really strange, because I use that code myself.

7

Oh! Do you use BabylonNative or BabylonReactNative?

8

oh I see… no just Babylon, sorry!

9

No worries, thanks for your suggestion anyway! This does confirm my suspicion that it should have worked. I’ll create a bug post instead :smiley:

10

in the meantime, you can do what I did for my number texts:

  • create a texture with all the letters on it (+mipmaps)
  • create a view that consists of an instance with ‘uv’ instance buffer for each letter in your string
  • update the uv buffers to get the right letters

everytime you change the text you are only updating the buffers, and the whole string is just 1 draw call if you do it right

image
image882×1440 98.7 KB

(al these numbers were done with 2 textures)

2 Likes
11

Wow, thanks! I’ll keep that in mind as a backup! I never would have thought of doing it that way.