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

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

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");

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.

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?


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

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