DynamicTexture - Draw text on rect without stretching

[unobruno]

Hey guys, i got the following scene: 

As you can see the text is stretching. How do i draw a text and keep the ratio ?

My code so far: 

createRect = function(scene, bId, id,  x, y, z, width, depth, height, rotation) {
    //Add example mesh to the scene
    let cube = BABYLON.Mesh.CreateBox(bId, 1, scene);
    let moduleTexture = new BABYLON.DynamicTexture("dynamic texture", 2048, scene, true);
    let cubeMat = new BABYLON.StandardMaterial(bId, scene);
    cubeMat.diffuseTexture = moduleTexture;
    cubeMat.diffuseTexture.uOffset = 0.02;
    cubeMat.diffuseTexture.wAng = 1.57;
    cubeMat.diffuseColor = new BABYLON.Color3(0.92, 0.92, 0.92);
    cubeMat.specularColor = BABYLON.Color3.Black();
    cube.material = cubeMat;
    cube.enableEdgesRendering();
    cube.edgesWidth = 5.0;
    cube.edgesColor = new BABYLON.Color4(0.4, 0.4, 0.4, 1);
    cube.position = new BABYLON.Vector3(x,y,z);
    cube.scaling = new BABYLON.Vector3(width, height, depth);
    cube.rotate(BABYLON.Axis.Y, rotation * Math.PI / 180 , BABYLON.Space.WORLD);


    var clearColor = "white";
    var font = "bold 50em Arial";
    var invertY = true;
    var text = id;
    var color = "black";
    var x = 200;
    var y = 1224;
    moduleTexture.drawText(text, x, y, font, color, clearColor, true, true);
}

PS: I got a orthographic camera with a top down view

[brianzinn]

Have you seen this thread?
http://www.html5gamedevs.com/topic/14975-drawtext-and-keep-ratio-without-stretching-in-3d-text/
 

I would try to switch to GUI.  I'm not recommending this, but here is a way to center text without stretching:

var planeTexture = new BABYLON.DynamicTexture('dynamicBABYLON.Texture', 512, this.scene, true);

// remove typing if you are using JavaScript
let textureContext: CanvasRenderingContext2D = planeTexture.getContext();
// needed for measuring
textureContext.font = 'bold 200px verdana';
let size = planeTexture.getSize();

textureContext.save();
textureContext.fillStyle = '#BBBBBB';
textureContext.fillRect(0, 0, size.width, size.height);

let textSize = textureContext.measureText(text);
textureContext.fillStyle = 'Black';
textureContext.fillText(text, (size.width - textSize.width) / 2, (size.height + 20) / 2);

textureContext.restore();
planeTexture.update();

 

[JohnK]

Using GUI is probably the best idea. However if you want to use dynamicTexture then read on. For the text not to stretch the width and height of the mesh must be in the same proportion as the width and height of the dynamictexture.  Instead of a single number as the second parameter you can use an object which has width and height as properties ie {width:  width, height: height}. The next issue is that when the fourth parameter (generateMinMaps) is set to true the width and height of the dynamictexture will be changed to the closest power of two and so also change the proportion of width to height.

Two methods

1.  rectangle width = 100, height = 120 then for any n use

dynamicTexture("mytexture", {width:100*n, height:120*n}, scene, false)

2. Use powers of two for width and height of rectangle

rectangle width = 128, height = 256

dynamicTexture ("mytexture", {width:128*n, height:256*n}, scene, true)