Writing text on top of a cylinder

Hi, apologies for a very basic question; but I want to draw text on the top of a cylinder; probably just numbers; so that I can identify them (probably with some user input);
I googled and tried to draw text on the cylinder, however for all my tries I am either unable to write text in the current angle / center of the top cylinder or the color of the cylinder cannot be made transparent (etc).

I am sure I have conceptually not understood something; any simple example that can show drawing text on top of a cylinder (without having to change the color of the cylinder).

If you’re using MeshBuilder Cylinder that’s pretty simple to do! :smiley: Map Materials to Individual Mesh Faces | Babylon.js Documentation (babylonjs.com)

1 Like

Actually I think I am not following how to set text on the top/bottom UV or even write text around a cylinder … like maybe the cylinder dimension info etc (so that its easier to debug); I know its something I dont understand about UV and the co-ordinate system with reference to it.
I am wondering if I should write on a plane and then place the plane on top of the cylinder :frowning:
Apologies again for my ignorance

Hey there, here’s a little example of writing text on top of a cylinder using a DynamicTexture. :slight_smile:

PS I added some more comments but feel free to ask more questions about it (I might not know the answers but I bet someone on the forum will). :beers:

2 Likes

Many thanks for your answer; this works perfectly; Just 2 questions (apologies in advance)
First :-
When you set the faceUV array; you say something like use only first pixel, etc … what do we imply by this ?.Basically what does the co-ordinate system Vector4(0, 0, 0, 0) vs Vector4(0, 0, 1, 1) represent ? – I could not find the documentation that explains this.

Second:
If I had to write two lines on top or … something in the centre of the cylinder (faceUV[0] – I suppose) ; is it possible ?; I know writing in the cylinder centre must be a matter of selecting the proper faceUV – with the correct Vector4 values (not sure what they should be).
For writing 2 lines on the top … I dont think I need to create 2 dynamic textures for it … with a different X, Y co-ordinate right ?.

Either ways, thank you for your help so far; this will get me experimenting more

2 Likes

Textures are expressed in a coordinate space from (0,0) to (1,1). To select which part of the texture you want to display, you select a range on this space as a Vector4 (x0,y0,x1,y1).

Getting Started - Chapter 2 - Face Materials | Babylon.js Documentation (babylonjs.com)

image

3 Likes

Yep you can write two lines on top by altering the y coordinate used in the calls to drawText, just pass null for the clear color when drawing the second line so that it doesn’t clear the first line of text.

For drawing text on both the top and side faces, here’s an example where the top half of the texture is used for the top face and the bottom half is used for the side face.

And thank goodness @carolhmj is here to help explain how the UV mapping works before I get in over my head! :slight_smile:

1 Like

Cannot thank you enough for the diagram (very impressive) and also the example to write on the middle – many thanks!. I tried to write in to the middle of the cylinder but somehow all my text writes upside down (mirror image); anyhow I will copy your code and keep experimenting.

Thank you again for your help.
I will also try to write multiple lines and post the result for some noob like me in the future.

2 Likes

You’re welcome, here’s a little more info about the playground example. :slight_smile:

In the playground I used the invertY option when drawing the text, making the above diagram seem upside down (you can change that parameter to false to match the diagram). Also I used the default left handed system, making the above diagram backwards (you can use scene.useRightHandedSystem = true to use right-handed system like the diagram).

Also for the cylinder the middle face is mapped differently than the top and bottom, making the diagram backwards for the middle face’s UVs. So the x values are swapped for that face to correct it: (x1, y0, x0, y1).

PS you can also refer to the above playground to see how I’m passing null for the clear color when drawing the second line of text and changing the y positions for each line. :slight_smile:

2 Likes

Thank you again !— learnt a lot just from this post!

1 Like

On clarification; when using typescript we are not able to pass null for the clear color; since in the type definition file it only accepts a string.

→ dynamicTexture.drawText(text, (size - textWidth) / 2 + x, y, font, textColor, null, true, true);

1 Like

Good catch, here’s a PR to fix that type to allow null for the clearColor param in TS. :slight_smile:

2 Likes