Texture looks jagged with white background

Questions
1

Hello,

Loading a texture in an older code, made texture look fine when it was rotated.
Now, in a newer code that seems to be the same, the same texture with same sampling mode and properties, looks jagged when it is rotated.

I tried all the modes and sampling combinations and it always looks jagged.

Some idea what property is causing it?

Older code:

Screenshot_1
Screenshot_1366×769 9.35 KB

Screenshot_2

Newer code:

Screenshot_3
Screenshot_3365×1044 19.8 KB

Screenshot_4

2

We could use a repro to help :wink:

2 Likes
3

Hello,
I’m sorry for the late answer.

What is caussing the issue is the white background, if I remove it the foreground texture looks fine.
It is the same for Babylon 7 and 4. So it is not about Babylon version.

The problem is that I’m not able to determine why my previous code looks fine, and my new code look jagged with white background. The code seems to be the same.
Some idea about what is causing the jagged edges?

EDIT: Ok, I found this question my own self asked in the forum years ago lol Texture quality depends on assets loading order
So the reason is the asset loading order.

Playground jagged texture:

Playground not jagged texture:

4

@Evgeni_Popov can you have a look ?

5

Would you mark this solved?

6

That’s actually the source of the problem. Shouldn’t we find a solution to be able to load assets in any order and not to see jagged textures.

2 Likes
7

It would be better to have only one topic to follow.

1 Like
8

As I mention, that question is being answered here, so this is the topic to follow up.

9

Yep, my bad… sry

10

Set the renderingGroupId of the sprite manager to control the rendering order so you can achieve the antialiased effect of the sprite texture:

1 Like
11

Ok, that works.

The problem is that in my engine, the user can load assets in any order because they are sorted by file dependency order.

So… to find a way to set the renderingGroupId automatically and relieve the user from doing this task… I have some questions:

  • A renderingGroupId would be assigned to sprites in the background, and another to sprites in the foregroung?
  • What if the foreground sprites (characters) overlap, will they apply the antialias between themselves?
  • Should the renderingGroupId be applied based on z order of sprites?
  • What if the same spriteManager is being used by two sprites, one in the background and another in the foreground? Will it apply antialias with itself?
12

That’s because blending is performed with the current background at the time the sprite is drawn. When the robot is rendered first, it is blended with the dark blue background color, and when the white sprite is rendered over it, no blending occurs because the white sprite has no alpha (alpha=1 everywhere). Hence the jagged borders. When draw order is reversed, the robot will be blended with the white background color, leading to the correct blended color.

There’s no much we can do, I think… The solution would be to sort the sprites according to their depth from the camera.

2 Likes