# Dynamic texture, clear background

**URL:** <https://forum.babylonjs.com/t/dynamic-texture-clear-background/17319>\
**Category:** Questions\
**Created:** [January 8, 2021, 11:40pm UTC](https://forum.babylonjs.com/t/dynamic-texture-clear-background/17319 "2021-01-08T23:40:19Z")\
**Posts on this page:** 18\
**Page:** 1

<div class="post-metadata">

**Author:** ![saitogroup](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/saitogroup/32/10624_2.png) [@saitogroup](https://forum.babylonjs.com/u/saitogroup)\
**Post date:** [January 8, 2021, 11:40pm UTC](https://forum.babylonjs.com/t/dynamic-texture-clear-background/17319/1 "2021-01-08T23:40:19Z")

</div>

Hi There,

I know I am missing something simple… but I kept looking around and trying things and need some help. Here is my playground: [https://playground.babylonjs.com/#5ZCGRM#946](https://playground.babylonjs.com/#5ZCGRM#946) . I’m just trying to get the background to be transparent so you can only see the text (I might also make the text emissive, hoping that’s also easy). Thank you.

---

<div class="post-metadata">

**Author:** ![slin](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/slin/32/36084_2.png) [@slin](https://forum.babylonjs.com/u/slin)\
**Post date:** [January 9, 2021, 2:41am UTC](https://forum.babylonjs.com/t/dynamic-texture-clear-background/17319/2 "2021-01-09T02:41:23Z")

</div>

Is this what you want to achieve?

[https://playground.babylonjs.com/#5ZCGRM#949](https://playground.babylonjs.com/#5ZCGRM#949)

Handle text edge better caused by antialising below. But @JohnK’s solution should be the single truth.  
[https://playground.babylonjs.com/#5ZCGRM#951](https://playground.babylonjs.com/#5ZCGRM#951)

---

<div class="post-metadata">

**Author:** ![JohnK](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/johnk/32/26764_2.png) [@JohnK](https://forum.babylonjs.com/u/JohnK)\
**Post date:** [January 9, 2021, 9:33am UTC](https://forum.babylonjs.com/t/dynamic-texture-clear-background/17319/3 "2021-01-09T09:33:46Z")

</div>

Alternative [https://playground.babylonjs.com/#5ZCGRM#950](https://playground.babylonjs.com/#5ZCGRM#950)

---

<div class="post-metadata">

**Author:** ![saitogroup](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/saitogroup/32/10624_2.png) [@saitogroup](https://forum.babylonjs.com/u/saitogroup)\
**Post date:** [January 11, 2021, 10:54pm UTC](https://forum.babylonjs.com/t/dynamic-texture-clear-background/17319/4 "2021-01-11T22:54:04Z")

</div>

Yes, the one where you could clearly see the language; this is awesome. Thank you so much for your help. I’m not going to study this example.

---

<div class="post-metadata">

**Author:** ![saitogroup](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/saitogroup/32/10624_2.png) [@saitogroup](https://forum.babylonjs.com/u/saitogroup)\
**Post date:** [January 11, 2021, 11:01pm UTC](https://forum.babylonjs.com/t/dynamic-texture-clear-background/17319/5 "2021-01-11T23:01:44Z")

</div>

I guess my lingering question on this is why is the “white” gray? [https://playground.babylonjs.com/#5ZCGRM#953](https://playground.babylonjs.com/#5ZCGRM#953)

---

<div class="post-metadata">

**Author:** ![slin](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/slin/32/36084_2.png) [@slin](https://forum.babylonjs.com/u/slin)\
**Post date:** [January 11, 2021, 11:12pm UTC](https://forum.babylonjs.com/t/dynamic-texture-clear-background/17319/6 "2021-01-11T23:12:50Z")

</div>

You can increase brightness of your light:

```
light.intensity = 2.5;
```

---

<div class="post-metadata">

**Author:** ![saitogroup](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/saitogroup/32/10624_2.png) [@saitogroup](https://forum.babylonjs.com/u/saitogroup)\
**Post date:** [January 13, 2021, 12:04am UTC](https://forum.babylonjs.com/t/dynamic-texture-clear-background/17319/7 "2021-01-13T00:04:57Z")

</div>

lol yr right that was it!!! haha thank you!

---

<div class="post-metadata">

**Author:** ![saitogroup](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/saitogroup/32/10624_2.png) [@saitogroup](https://forum.babylonjs.com/u/saitogroup)\
**Post date:** [January 13, 2021, 1:47am UTC](https://forum.babylonjs.com/t/dynamic-texture-clear-background/17319/8 "2021-01-13T01:47:45Z")

</div>

Check this out: [https://playground.babylonjs.com/#5ZCGRM#970](https://playground.babylonjs.com/#5ZCGRM#970)

I’m going to try to dynamically change the text (in the update loop).

Do you know if there is a preferred method to do this, or should I just muddle my way through?

I’m basically trying to create a really bizarre 3D text billboard situation (that changes over time).

Not really seeing a “text” variable in here:

1. \_context: CanvasRenderingContext2D

2. canvas: canvas

3. direction: “ltr”

4. fillStyle: “#ffffff”

5. filter: “none”

6. font: “bold 56.0388px monospace”

7. globalAlpha: 1

8. globalCompositeOperation: “source-over”

9. imageSmoothingEnabled: true

10. imageSmoothingQuality: “low”

11. lineCap: “butt”

12. lineDashOffset: 0

13. lineJoin: “miter”

14. lineWidth: 1

15. miterLimit: 10

16. shadowBlur: 0

17. shadowColor: “rgba(0, 0, 0, 0)”

18. shadowOffsetX: 0

19. shadowOffsetY: 0

20. strokeStyle: “#000000”

21. textAlign: “start”

22. textBaseline: “alphabetic”

23. **proto** : CanvasRenderingContext2D

---

<div class="post-metadata">

**Author:** ![slin](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/slin/32/36084_2.png) [@slin](https://forum.babylonjs.com/u/slin)\
**Post date:** [January 13, 2021, 2:59am UTC](https://forum.babylonjs.com/t/dynamic-texture-clear-background/17319/9 "2021-01-13T02:59:42Z")

</div>

@saitogroup

Please check this PG: It changes original text to ‘Hello World’ after 3 seconds.

[https://playground.babylonjs.com/#5ZCGRM#972](https://playground.babylonjs.com/#5ZCGRM#972)

My changes are highlighted below:

```
setTimeout(() => {
    // width and height equal to textureGround dimensions
    textureContext.clearRect(0,0, 512, 256);
    textureContext.fillText('Hello World', 75, 135);
    textureGround.update();
}, 3000);
```

---

<div class="post-metadata">

**Author:** ![saitogroup](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/saitogroup/32/10624_2.png) [@saitogroup](https://forum.babylonjs.com/u/saitogroup)\
**Post date:** [January 14, 2021, 10:26pm UTC](https://forum.babylonjs.com/t/dynamic-texture-clear-background/17319/10 "2021-01-14T22:26:28Z")

</div>

Thank you.

Take a look: [https://playground.babylonjs.com/#5ZCGRM#973](https://playground.babylonjs.com/#5ZCGRM#973)

This creature actually goes in this vr world: [https://www.instagram.com/p/CImmSfRlbvY/](https://www.instagram.com/p/CImmSfRlbvY/)

I guess what I’m noticing is that (a.) you have a draw text method which initializes the text and then (b.) you have a fill text method changes the text.

The last positional thing I’m trying to do here (I may add a bloom later?) is change the font-size of the text dynamically as well. Do you have a suggestion for that?

Also, I want to learn what you know about re: this text drawing stuff; do you know if there is a good tutorial on the docs? and/or which documentation is most important to look at? (the basic tutorial did not cover these more advanced aspects we are looking at right now).

---

<div class="post-metadata">

**Author:** ![slin](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/slin/32/36084_2.png) [@slin](https://forum.babylonjs.com/u/slin)\
**Post date:** [January 14, 2021, 11:24pm UTC](https://forum.babylonjs.com/t/dynamic-texture-clear-background/17319/11 "2021-01-14T23:24:36Z")

</div>

Hi @saitogroup

You are welcome. Not sure if you notice the different of initializing text and my code for updating the text.

Initializating text (your original code) is invoked on DynamicTexture. It is a BABYLON API. I believe underlying it updates the 2D canvas used as texture.

```
textureGround.drawText("complexity", 75, 135, font, "white", "transparent", true, true);

```

The text update call I added was the following. It is invoked directly on the 2D canvas.

```
textureContext.fillText(stanza[wordCounter], 75, 135);

```

So basically, BABYLON DynamicTexture is using the content on the 2D canvas ‘textureContext’ and applies it on the mesh (the plane mesh variable ‘ground’ you created).

Now to update the content, you only need to update the 2D canvas as I showed by calling fillText method. This 2D canvas context is of type CanvasRenderingContext2D. It is standard HTML5 canvas directly supported by modern browser. It has nothing to do BABYLON. You can find all the available API functions you can use: [CanvasRenderingContext2D - Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D)

Changing text styles is described in this section: [Text styles](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D#text_styles)

You can also search for html5 canvas there should be plenty examples and tutorials online.

---

<div class="post-metadata">

**Author:** ![saitogroup](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/saitogroup/32/10624_2.png) [@saitogroup](https://forum.babylonjs.com/u/saitogroup)\
**Post date:** [January 16, 2021, 1:04am UTC](https://forum.babylonjs.com/t/dynamic-texture-clear-background/17319/12 "2021-01-16T01:04:35Z")

</div>

Ah ha! That’s where it all is, lol. OK, I got that thing I wanted working, and now I’m just studying that canvas stuff…

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [January 16, 2021, 2:13am UTC](https://forum.babylonjs.com/t/dynamic-texture-clear-background/17319/13 "2021-01-16T02:13:09Z")

</div>

I thought I should chime in as I have just answered a thread ([Light colored text with alpha = aliasing artifacts? - #10 by Evgeni\_Popov](https://forum.babylonjs.com/t/light-colored-text-with-alpha-aliasing-artifacts/17525/10)) that had the same problem than the original question of this thread:

If you want a really good blending, you should generate the dynamic texture as a pre-multiplied alpha texture (by calling `textureGround.update(true, true)`) and override the OpenGL blending factors (you also need to set `materialGround.useAlphaFromDiffuseTexture = true;` as you are setting the dynamic texture to the diffuse slot):

[https://playground.babylonjs.com/#5ZCGRM#980](https://playground.babylonjs.com/#5ZCGRM#980)

Old code:

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/c/c361e56af43d93b1afb70d9925b4772031cafc8a.jpeg)

New code:

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/b/bf2e0af797dfad911e4cad55a2b6eceb9fe57d12.jpeg)

---

<div class="post-metadata">

**Author:** ![Haywire](https://avatars.discourse-cdn.com/v4/letter/h/d26b3c/32.png) [@Haywire](https://forum.babylonjs.com/u/Haywire)\
**Post date:** [December 28, 2023, 5:53pm UTC](https://forum.babylonjs.com/t/dynamic-texture-clear-background/17319/14 "2023-12-28T17:53:14Z")

</div>

I am trying to get this working with emissive rather than diffusive textures.

I am looking at [https://playground.babylonjs.com/#5ZCGRM#951](https://playground.babylonjs.com/#5ZCGRM#951)

and by changing:

materialGround.diffuseTexture = textureGround;

to

materialGround.emissiveTexture = textureGround;

The text then just disappears.

Does anyone know why this happens?

Thanks.

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [December 28, 2023, 8:27pm UTC](https://forum.babylonjs.com/t/dynamic-texture-clear-background/17319/15 "2023-12-28T20:27:27Z")

</div>

Welcome aboard!

There’s no injection point for the emissive color as there is for the diffuse one. Maybe you can just use the baseColor as the final color:

> **[Babylon.js Playground](https://playground.babylonjs.com/#5ZCGRM%234827)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

---

<div class="post-metadata">

**Author:** ![Haywire](https://avatars.discourse-cdn.com/v4/letter/h/d26b3c/32.png) [@Haywire](https://forum.babylonjs.com/u/Haywire)\
**Post date:** [December 29, 2023, 3:24pm UTC](https://forum.babylonjs.com/t/dynamic-texture-clear-background/17319/16 "2023-12-29T15:24:34Z")

</div>

Thanks!

Problem solved by just adding a hemi light and using diffuse textures for the things I wanted to make transparent.

A great benefit is that the page now loads on iPhones, where previously the AdvancedDynamicTexture/Buttons approach was causing crashes.

---

<div class="post-metadata">

**Author:** ![Roy-Kid](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roy-kid/32/14651_2.png) [@Roy-Kid](https://forum.babylonjs.com/u/Roy-Kid)\
**Post date:** [October 5, 2024, 5:50pm UTC](https://forum.babylonjs.com/t/dynamic-texture-clear-background/17319/17 "2024-10-05T17:50:43Z")

</div>

Hi, this looks pretty good! But im using right hand system, and the text is mirrored. How can I flip it ? I try to use scale(1, -1), but it turns to black instead of transparent. Could you help me with it?

---

<div class="post-metadata">

**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\
**Post date:** [October 5, 2024, 7:40pm UTC](https://forum.babylonjs.com/t/dynamic-texture-clear-background/17319/18 "2024-10-05T19:40:03Z")

</div>

Perhaps you just have to rotate your camera 😉

> **[Babylon.js Playground](https://playground.babylonjs.com/#5ZCGRM%235246)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL and WebGPU 3D scenes