Why is my texture has lines at the beginning and the end?

Questions
1

I am using dynamic texture to create text textures, but there is something weird about the texture. Sometimes it has trailing dash in the beginning or the end of the text.

UntitledUntitled1 Untitled2

Depending on the text sometimes it shows, and sometimes it does not.

How to fix this?

2

That’s interesting… could it be the UV coordinates of the mesh the texture is projected on? It seems like it is not a dash but an extension of the first letter’s (T) or the last letter’s (A) edges.

Would you be able to reproduce that in the playground?

1 Like
3

It may be because of the wrapping mode. You should use the CLAMP mode instead of REPEAT (which is the default one):

    texture.wrapU = BABYLON.Constants.TEXTURE_CLAMP_ADDRESSMODE;
    texture.wrapV = BABYLON.Constants.TEXTURE_CLAMP_ADDRESSMODE;
1 Like
4

I tried:

texture.wrapU = BABYLON.Constants.TEXTURE_CLAMP_ADDRESSMODE;
texture.wrapV = BABYLON.Constants.TEXTURE_CLAMP_ADDRESSMODE;

But it is still the same.

My code is quite long, it is kind of hard to reproduce in PG. @RaananW but my code looks something like this:

    var tex = new BABYLON.DynamicTexture(generateUUID(), { width: DTWidth, height: DTHeight }, $scope.scene);
    tex.hasAlpha = true;
    tex.wrapU = BABYLON.Constants.TEXTURE_CLAMP_ADDRESSMODE;
    tex.wrapV = BABYLON.Constants.TEXTURE_CLAMP_ADDRESSMODE;
    var ctx = tex.getContext();
    ctx.setTransform(1, 0, 0, -1, 0, DTHeight);
    .....
    .....
    tex.drawText(text, left, top, drawFont, style.fontColor, "transparent", true, true);
    ctx.setTransform(1, 0, 0, -1, 0, DTHeight);

Note that there is ctx.setTransform() twice, one before drawing text, and one after drawing text. This is because without ctx.setTransform() the texts are upside down. These ctx.setTransform() fixes it.

Could it be this is the cause of the problem? Only certain characters with certain number of characters triggers it.

Untitled
Untitled347Ă—878 50.7 KB
Untitled1
Untitled1398Ă—960 320 KB
Untitled2
Untitled2388Ă—996 334 KB

5

@RaananW, @Evgeni_Popov Hi guys, I have made the playground.

https://playground.babylonjs.com/#45FDGY

In the playground I can only produce the dash line at the end of the text with Arial font type. In my real case the font type can be anything.

Please help.

Untitled
Untitled1761Ă—952 392 KB

6

In clamp mode the border pixel is repeated whenever your uv coordinates are outside the range 0…1.

For the “TEAMA” text, for eg, the extra pixels are coming from the last pixel of the A branch which lies in the last column of the texture, so which is repeated for u coordinates > 1.

There are two ways to correct this:

  • use only uv coordinates between 0 and 1 to apply the texture to the plane (to be done in the DCC tool like Blender)
  • add an empty border around the texture

Using the 2nd solution:

https://playground.babylonjs.com/#45FDGY#1

4 Likes
7

Thank you for your solution. I tried option 2, but…

Untitled
Untitled337Ă—845 233 KB

It becomes weird. The code you added are:

    const border = 1;
    var tex = new BABYLON.DynamicTexture(generateUUID(), { width: Math.round(DTWidth) + border * 2, height: Math.round(DTHeight) + border * 2 }, scene);
    .....
    if (line == 1) {
        var top = DTHeight / 2;
        tex.drawText(text, left + border, top + border, drawFont, style.fontColor, "transparent", true, true);
    }
    else {
        var textHeight = getTextHeight(font_size, style.fontType) + style.lineHeight;

        for (var i = 0; i < line; i++) {
            if (fitToContainer)
                textHeight = DTHeight / line;

            var top = (i + 1) * textHeight;
            tex.drawText(textArr[i], left + border, top + border, drawFont, style.fontColor, "transparent", true, true);
        }
    }

These right? Did I miss anything?

I will try use your first solution. Currently my shading node for the logo is like this:

Untitled
Untitled500Ă—650 46.9 KB

What should I change in the node?

8

Maybe a border of 1 is not enough in some cases, try to raise it. Also, mipmapping could explain the problems, try to disable it on the texture.

For the first solution, I don’t know Blender so I can’t help here. However, the fix is not in the material, it is on the generation of the texture coordinates.

1 Like
9

Hello @Evgeni_Popov,

I change the background color to green to see the border of the texture.

Untitled
Untitled384Ă—918 256 KB

So do you mean the text should not touch the border?

10

Yes, but I’m speaking about the original texture, not the plane on which you put the texture as you show in the screenshot: because you use texture coordinates outside the 0…1 range, you get some empty spaces on the border.

Look at the texture in the Textures section of the inspector:
image