Problem with making the text's background transparent

Questions
1

guys,
I have problem in putting text on a plane. Here is my PG (https://www.babylonjs-playground.com/#2EYZPE#13). The text has shadow and not very clean. I tried several techniques suggested in this forum but not make it.

2

Hi E, and welcome to BJS forum.

https://www.babylonjs-playground.com/#2EYZPE#14

I disabled line 44 (opacity texture)… and also added full billboardMode in line 45 (text always faces camera). Any better? I hope so.

Something seems to be wrong with the font family, though. Checking…

3

Hi Wingnut,
Thanks for the reply. The issue I have with what you suggested is that the text lost its clarity and not solid.I already tried this and due to the mentioned font issue I added opacityTexture.

4

https://www.babylonjs-playground.com/#2EYZPE#16

Font string was missing a space.

Yeah, I tried some things… no measuring, manually setting plane size (65) and dynamic texture resolution (2048)… and increased font size. (and changed to Georgia fonts just to make sure font-family changing is working).

Starting to improve?

5

Great. What I exactly needed. That missing space blocked me for one day. A huge thanks.

6

My pleasure. Sorry for the lost day. Yeah, I used a console.log(font) to see the missing space. It was blowing my mind… I couldn’t understand what its problem was.

Got a few minutes to stay nearby? I can build you a version using BabylonJS GUI (advanced dynamic texture). Or I can show you how/where to learn how to try one yourself. I dunno if it will be any more fun/easy, but it’s a “newer” way to make text on planes.

1 Like
7

Thanks @Wingnut. You saved me.
I am using the BJS in a very dynamic environment where the text are attached to some objects and the size (height, width, depth) of objects are changed with the user configuration, so the texts as well. Also, the direction, position, value , … of the texts are changed. The user can zoom in/out which requires to change the position of the text but not the size. I already tried this scenario with the BJS GUI and the TextBlock, but find it complicated. Moreover, I need to check the collisions and intersections of the texts with the objects and IMO tmanaging the Plane is easier than GUI elements.

1 Like