drawText and keep ratio without stretching in 3D Text

[3Dlove]

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 :

 

http://www.babylonjs-playground.com/#1AGOSB

 

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 :-)

[Temechon]

Hello, 

 

You can see what I've done for bGUI here: https://github.com/Temechon/bGUI

 

And here is a demo if you want to try it : http://temechon.github.io/bGUI/

[3Dlove]

Hello,

 

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

[3Dlove]

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;

or 

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;

or

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

[3Dlove]

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 ?

[3Dlove]

Any ideas ? 

 

Is there (existing) a library for drawing text in canvas like we write in a HTML div ? (adjust automatically the font size and go to line)

[jerome]

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