Why Is My Dynamic Text Texture Got Flipped Horizontally? Also How To Make It Transparent?

Questions
,
1

Im using dynamic texture to create a text and apply it into a texture. My problem is the text got inverted.

Untitled
Untitled852×552 78 KB

If I change the uScale = -1, the text is gone.

Also how to make the background transparent?

Here is my code:

	function createBackTextTexture(material, scene, text, textureName)
	{
		//Set width an height for plane
		var planeWidth = 10;
		var planeHeight = 3;
	
		//Set width and height for dynamic texture using same multiplier
		var DTWidth = planeWidth * 60;
		var DTHeight = planeHeight * 60;
	
		var tex = new BABYLON.DynamicTexture(textureName, {width:512, height:256}, scene);
		var ctx = tex.getContext();
		
		var font_type = "monospace";
		var size = 12; //any value will work
		ctx.font = size + "px " + font_type;
		var textWidth = ctx.measureText(text).width;
		
		//Calculate ratio of text width to size of font used
		var ratio = textWidth/size;

		//set font to be actually used to write text on dynamic texture
		var font_size = Math.floor(DTWidth / (ratio * 1)); //size of multiplier (1) can be adjusted, increase for smaller text
		var font = font_size + "px " + font_type;			
		
		tex.drawText(text, null, null, font, "green", "white", true);
		
		logMat.diffuseTexture = tex;
	}

		createBackTextTexture(logMat, scene, "TEXT", "text_back");
2

Hi @AlvinStefanus and welcome to the forum.

Here is a PG with a dynamicTexture with transparent background https://www.babylonjs-playground.com/#TMHF80#10

For mirrored text I am making an assumption that the model is imported from an app that uses a right handed system rather than the left handed system that Babylon.js uses.

Line 4 in this PG shows a possible solution https://www.babylonjs-playground.com/#TMHF80#141 if my assumption is correct.

3

Hello @JohnK,

Thank you for the response.

I use Blender to make the object. If I put:

scene.useRightHandedSystem = true;

the textures become all black. What is happening here?

Untitled2

4

Also I got a lot of unhandled exceptions with and without useRightHandedSystem = true

Untitled1
Untitled11446×672 37.7 KB

6

Nvm, I just played around with my blender model. Apparently I have to do some rotations to the text container, finally I got it right, thank you.

1 Like