Jump to content

drawText and keep ratio without stretching in 3D Text


Recommended Posts

Hello guys :)


I would like to drawText, but WebGL requires canvas size of power of two (256*512 for instance, but 168*220 is not possible).


So here is an example :




You can see 2 plans with text :


- the plan from the bottom (titleMesh) is OK and good because its dimensions have the same ratio as the canvas (width = 2 * height),


but how to have the same result if it has'nt the same ratio : example : (width = 2.5/0.7 * height)


- the plan from the top (titleMesh2) : the text is stretched :/ how to don't stretch the text and keep the good ratio and the same visual aspect like titleMesh (in function of dimensions of the mesh)



Thanks for your help :-)

Link to comment
Share on other sites



Thank you, that rocks a lot =)


An idea : you can add the possibility to choose the background color for GUIText, something like this, below code to improve :

var GUIText = function(name, width, height, options, guisystem) {    var dynamicTexture = new BABYLON.DynamicTexture(name, {width:width, height:height}, guisystem.getScene(), true);    var ctx            = dynamicTexture.getContext();    ctx.font           = options.font;    ctx.textBaseline   = options.textBaseline || "middle";    ctx.textAlign      = options.textAlign || "start";    ctx.direction      = options.direction || "inherit";    this._ctx           = ctx;    var size = dynamicTexture.getSize();    if (options.background !== undefined) {        ctx.fillStyle = options.background;        ctx.fillRect(0,0,size.width,size.height);    }    ctx.fillStyle      = options.color || "#ffffff";    ctx.fillText(options.text, size.width/2, size.height/2);    // Call super constructor    bGUI.GUIPanel.call(this, name, dynamicTexture, null, guisystem);    dynamicTexture.update();};

Unfortunately, it's not what I would like to do : I would like to write a text on a book mesh whish is able to rotate and animate in the 3D scene, a GUI is only for 2D Text and pictures.

But it is a very good project and idea, I'm happy to know it :)

Link to comment
Share on other sites

The problem is that I would like to use dimensions whish are not power of two :/
In your case of GUI, I saw 2 possibilities :
case 1 :
var widthTitle1 = 512, heightTitle1 = 256;var gui = new bGUI.GUISystem(scene, 1200, 780);var textTitle1 = new BABYLON.DynamicTexture("textTitle", {width:widthTitle1, height:heightTitle1}, scene, true);textTitle1.drawText("Hello guy", null, 64, "Bold 68px Arial", "rgba(255,255,255,1.0)", "blue"); textTitle1.update();var title1 = new bGUI.GUIPanel("title1", textTitle1, null, gui);title1.guiposition(new BABYLON.Vector3(widthTitle1/2+10,heightTitle1/2+10,0));

if you take :

var widthTitle1 = 512, heightTitle1 = 256;


var widthTitle1 = 512, heightTitle1 = 64;


the text has the same ratio and size because there are power of two, but you youse the code below, it's not the same :

var widthTitle1 = 400, heightTitle1 = 256;

the text is stretched



Case 2 : 

var widthCanvas = 512, heightCanvas = 256; // must be power of twovar gui = new bGUI.GUISystem(scene, 1200, 780);var title2 = new bGUI.GUIText("title2", widthCanvas, heightCanvas, {font:"Bold 68px Arial", text:"Hello", color:"#fff", background:"blue"}, gui);title2.guiposition(new BABYLON.Vector3(266, 138,0));

if you choose :

var widthCanvas = 512, heightCanvas = 256;


var widthCanvas = 257, heightCanvas = 129;

the result is the same because it's the next power of two that is used, if you choose 129, its 256.



So, either the text is streched, either you can't choose dimensions whish are not power of two :(

Link to comment
Share on other sites

Hello guys, 


I worked on it and I have new :

here is the new example : http://www.babylonjs-playground.com/#1AGOSB#2


There are several functions, just go to line 145 :


you can play with parameters :

- change mesh dimensions

- textHeight

- the parameter canRescale set to false do nothing, set to true : set u and v Scaling to the texture:

play with it, I'm not sure that is correct in my function code

- the problem is that you can't choose dimensions of a texture whish are not power of two, for the canvas text dimensions;

so if you set textObj.canvasX and textObj.canvasY to 0 ; my function choose values for you, else you can choose a value (256, 512, 1024 for instance)


What do you think ? :)

Link to comment
Share on other sites

I'm afraid you have to handle by your own the line feed as it is not a part of the DOM canvas specification.

As well for sizing fonts.


Many people on the web published snippets or tutos to emulate the line feed : they set the text to returned at new canvas coordinates, computing them from the current text position and the real text size (with metrics property : http://www.html5canvastutorials.com/tutorials/html5-canvas-text-metrics/ )

Idem for sizing the text... ratios to compute from the canvas size and the wanted text size to guess the font size or vice versa


ex : http://stackoverflow.com/questions/22943186/html5-canvas-font-size-based-on-canvas-size

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...