Generating New Dynamic Texture Is Inverted Upside Down

Questions
,
1

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.

Untitled
Untitled381Ă—825 242 KB
Untitled1
Untitled1392Ă—858 247 KB

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?

2

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
3

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.

4

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
5

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?

6

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
7

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

8

Glad I could help!

9

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?

10

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

11

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.

12

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.

13

thanks !
solve my problem :crazy_face:

14

I experience the same problem and none of the initial parameter work, and neither the work around in this thread. The weird part is that I checked (console.log) the value of invertY after draw image and still false and I was confuse about it.

After checking the source code a little bit, I found that sending (invertY = false) during update, will do the job.
textureGround.update(false);

Dynamic Texture Example | Babylon.js Playground (babylonjs.com)

Babylon.js/dynamicTexture.ts at master · BabylonJS/Babylon.js · GitHub

1 Like