Generating New Dynamic Texture Is Inverted Upside Down

So I make a model with Blender. A shirt with logos. Then in my Babylon.js file, I want to generate text to be assigned as texture in the logos. No matter what I do the generated texture is upside down.

This is how I generated the texture:

var tex = new BABYLON.DynamicTexture(generateUUID(), { width: DTWidth, height: DTHeight }, $scope.scene);

I tried these:

tex.invertZ = true not working
tex.uScale = -1 the texture becomes so weird, it rotates 90 or -90 degree, I cannot see the rest of the texture
tex.vScale = -1 the texture is gone.

How can I invert upside down?

Two things to try

  1. set the invertY parameter DynamicTexture | Babylon.js Documentation
  2. set right handedness Scene | Babylon.js Documentation on the scene
2 Likes

Hello,

I tried both solution, it does not work. Setting invertY when creating dynamic texture does not do anything.

Set right handedness just rotate the screen 180 degree. I am not sure what is wrong with it.

I have texture.drawText() function in it, could it be this is the culprit? It draws texture upside down.

I had the same problem with my dynamic textures coming out upside down.

Maybe something like this:

You may have to play around with the y coordinate since it’s temporarily flipped.

2 Likes

So the trick is with setTransform()? Could you help me explain the parameters, because I my dynamic texture size is dynamic {width: dynamicWidth, height: dynamicHeight}. What is the 128 in the parameter?

Yes since dynamic texture is basically just a canvas setTransform() should work.
Oh my bad I copy and pasted that from my code. 128 should be replaced with your texture height.
Give it a try and let me know how it goes!

1 Like

You sir are my life saver. I owe you my life.

Glad I could help!

Oh one more, I have another case.

    var trimmedUrl = url.replace('~/', '/');
    var tex = new BABYLON.Texture(trimmedUrl, $scope.scene);

    tex.hasAlpha = true;
    material.albedoTexture = tex;
    material.useAlphaFromAlbedoTexture = true;

This is not applying text, but applying texture from URL. It is the same, it is upside down. Using your technique setTransform(), how to deal with this one?

Maybe something like this?
You may need to make sure that the image has loaded first.

I have to use:

    var img = new Image();
    img.onload = function () {
        var plane = { width: 520, height: 280 }; //img size
        var texture = new BABYLON.DynamicTexture(generateUUID(), { width: plane.width, height: plane.height }, $scope.scene);
        var ctx = texture.getContext();
        ctx.setTransform(1, 0, 0, -1, 0, plane.height);
        ctx.drawImage(img, 0, 0, plane.width, plane.height);
        ctx.setTransform(1, 0, 0, 1, 0, plane.height);
        
        texture.hasAlpha = true;
        material.albedoTexture = texture;
        material.useAlphaFromAlbedoTexture = true;
    }
    img.src = imgUrl;

I cannot see the mesh, it is gone.

Nevermind I got it working by:

var tex = new BABYLON.Texture(trimmedUrl, $scope.scene, false, false);

So by default new Texture() is Y inverted. This is so confusing, by setting it false, it is now correct.

thanks !
solve my problem :crazy_face: