Jump to content

Write on cylinder sides


Recommended Posts

Hello everyone,

I'm trying to write a number on the three faces of a cylinder. The number might change so an image is not really an options. The best I manage to get is the number written on only one side. 


I don't understand what  uOffset do if someone can explain also explain it to me it would be great. 

Can someone help me ?


Link to comment
Share on other sites

Hi @julien.m and welcome to the forum. First of all you can find out about offsetting in the documentation here. Have a look at the suggested playground in the docs and play around with the offset values, this should provide you with the information on how offsets affect positioning.

Secondly your issue on writing numbers on all three faces of a cylinder, see this PG https://playground.babylonjs.com/#3M37JC#1

Some notes.

Lines 13 to 19 - sets the size of the dynamicTexture based on the radius and height of the cylinder. The material for each of the three faces of the cylinder come from different parts of the dynamicTexture. The longer left part will wrap around the curved face of the cylinder and has width 2* Pi * radius, to this is added a square part so of width same as height.

Line 21 - minmaps has been set to false, this allows the dynamicTexture canvas size to be the one set rather than adjusting to powers of 2. This way placing the text matches the pixel coordinates used.

Lines 23, 27 - the text is drawn twice, once in the long part to wrap around the curve and once in the smaller section for the bottom and top.

Line 27 - note the use of null rather than a clearColor, this allows the text to be added to the canvas rather than clearing the canvas and then writing the text.

Line 25 - font size for the top and bottom needs to be reduced to fit the circles.

Lines 32, 33 - I created a plane to check how the text fitted onto the two parts. This allowed me to find that positioning did not match coordinates when minmaps is true.

Lines 36, 37 - To ensure the digits were not reflected on the bottom and curved faces the usual order (Xbotttom, Ybottom, Xtop, Ytop) was changed to (Xtop, Ybottom, Xbottom, Ytop) for the UV values.

Hope this helps you achieve what you need.

Link to comment
Share on other sites

JohnK... guns-down the last of the morning's Q&A 0-replies.  Alright!  (Wingy reminds JK to blow the smoke away from the muzzle of his Colt 45, before holstering.)

(hi-5)  :)  BJS Forum Helpers Association.... ROCKS!  :)

We got an older 0-reply, though... http://www.html5gamedevs.com/topic/37167-render-post-processes-before-fullscreen-gui-layer/?tab=comments#comment-212504

RoyiBernthal asks hard questions.  :)

Hey, welcome to the forum from me, too, Julien.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...