Adding Text to a Texture

[spoboyle]

I currently have a loaded .babylon file which is textured with a .png.

I would like to be able to add text to this and do not understand if this is possible or where to start.

DynamicTextures seem to be able to add Text to materials but I can't see a way to add the text on top of a image texture.

Maybe MultiMaterial is a way to go somehow?

I have added this playground as a starting point even if its not a loaded mesh.

I would like to add different text to each of the 10 "sides" going around the circumference of the cylinder

http://www.babylonjs-playground.com/#2GZZLD#1

[iiceman]

Hi spoboyle and welcome to the forum!

I once did something like that: http://p215008.mittwaldserver.info/space_paint/

Maybe you can look at the source and find something useful. Basically you take the image first and draw that on your dynamic texture, then draw your text on top. I don't have time right now, but if you can't figure it out I'll make  a playground later

[spoboyle]

Thanks iiceman

I have managed to get a simplified version of my project into playground

http://www.babylonjs-playground.com/#18OA3I

if you removed the material (with the DynamicTexture added) you can see the effect I'm after. I want to be able to remove the text that is currently on the imported texture and replace it on creation for translation purposes.

http://www.babylonjs-playground.com/#18OA3I#2

initially I am replacing the imported texture with a simple DynamicTexture with just text; which gives odd results. I have added "CCCCC" and get 5 straight lines. If i use "Hello" I get 2 single straight lines.

Ultimately I want to create a context to draw my image texture onto and then draw some text over this. I'll then use the context as my DynamicTexture.

I think I am on the right lines, but before I process can anyone explain why I am not seeing the text I am drawing?

Edited January 20, 2017 by spoboyle
additional info

[iiceman]

Hmm, it works better with the cylinder mesh: http://www.babylonjs-playground.com/#2GZZLD#1  Edit: I copied the wrong link, I meant this one: http://www.babylonjs-playground.com/#2GZZLD#2

So I assume it might be something about the UV mapping for the mesh that you import? But I don't know enough about that to help you find the problem there, I fear :-/

You need that custom mesh? Or could You build that wheel with a Cylinder, too? Here is something else I did a while ago that does something similar using DynamicTexture: http://p215008.mittwaldserver.info/BabylonDev/MultiDice/

[spoboyle]

Thanks again, I am looking into a few things and making slow but steady progress, I don't necessarily need the import but it was the easiest way for me to skin something. your latest link may solve that problem for me I'll take a look

[iiceman]

@spoboyle

I copied the wrong link in my previous post, I fixed that now. Here is another one that might be closer to what you need: http://www.babylonjs-playground.com/#2GZZLD#3

It pretty much all about the scaling and how the text fits the texture. I made a rectangular texture to better fit the lateral surface and tired to fill it up as good as possible. The rest is done with the uScale of the texture. I think it's rally hard to imagine how ti changes when you change some values. My approach was to slow change the values and just try things out until i thought it fits.

Some difficulties that might be worth mentoning:

• the x and y where you draw the text are not 0,0 because:
  • the font has offset on x and y
  • the drawing starts in the lower left corner of the texture. start with a value close to your font size to make sure the text is actually on the texture and not below
• font size is not equal to the pixel size the text has on the texture... I don't know why..might depend on the font you choose
• if the size of the texture doesn't fit the the actual shape of your surface things get stretched (that may be the reason for your red lines), so if the lateral surface is a rectangle, try to get your texture as close as possible to that. You can specify {height: 128, width: 768} when creating the texture. I tried to fit 6 Cs so I chose width = 6 x height, but again, it doesn't fit perfectly, just try changing the values in slow steps. If you can keep the texture size a power of 2 (remember reading about that vaguely, a quick google search gave me articles like that, if you need to know more: http://www.katsbits.com/tutorials/textures/make-better-textures-correct-size-and-power-of-two.php)

Well, that's all I can think about now, I hope it helps. Good luck and let us see the final result or tell us if you need more help!

By the way: for text on image it might be the easiest to draw on transparent background and then just create another slightly smaller cylinder for the texture below: http://www.babylonjs-playground.com/#2GZZLD#4