Smoothing edges

[berserker.devel]

I created a texture with transparent offset of 2px.
I than recalculate that offset in box2d and everything works.
Because the image is inside a rectangle, there's no jagged lines on the edges,
and the linear filter works his magic on anti aliasing

Mission accomplished !

Thanks everybody for help and ideas, I apriciate it

Any suggestion for applying this method with custom shapes? In particular I need to draw rectangles and circles of arbirary sizes as in the screenshots here (FXAA is overkill on mobile side )
I'm using a "logic coordinates system" (not pixels) that is -1:1 x/y.

[doomtoo]

Nice! This should help me- I'm doing tiled textures, and because 'Nearest' filtering seems to be applied by default, the edges won't meet properly, since they are being smoothed. Adding a 1 or 2 px border should fix it, and I can just specify to place them accordingly.

Linear filtering also works, but the filtering is applied to the whole texture atlas, not just the texture region I am trying to apply it to (probably the nature of it)

[Sippolo]

I'm experiencing the same problem described here...I think I don't get the solution proposed: do I have to wrap the actual texture with a red rectangle of 1px stroke width, and offset it of 2px from the texture?
I've tried this way and I got both the red rectangle and the texture edges inside it with lots of sharp edges...I've also tried just by making a texture with a good transparent and/or semi-transparent (little Blur) border, and it doesn't work too.
I'm using a TextureRegion from a simple texture with linear filtering.

The texture is really nothing special, it looks like this:

box.png (866 Bytes) Viewed 1176 times

While this is the result when rotating and scaling it a bit on a white background:

box2.png (1.77 KiB) Viewed 1176 times

The question might seem dumb, but what exactly should I have to do for solve the problem?
Thanks in advance if anyone could help!

[Sippolo]

I've tried with little blur on borders and made manually an Alpha channel in photoshop, then saved for web and devices as PNG-24 with transparency, and it doesn't work, as shown here:

box3.png (2.89 KiB) Viewed 1160 times

It seems the alpha blending is applied correctly when rendering (you can see the blurred borders), but still the sharp border lines have aliasing...
I admit I'm not a professional artist (you probably guessed already ), but this issue is really pissing me off..
Please help clearing my ignorance on this


EDIT:

I've managed to apply a pre-antialiasing by blurring the whole borders (instead of duplicating the layer, blur the the base underneath the duplicated layer, preserving the sharp and well defined box edges I needed), but I don't feel good for the result, it seems all blurred while I'd need a well defined graphics for my needs, is that impossible?

This is what I achieved:

box4.png (3.33 KiB) Viewed 1159 times

[haimat]

Unfortunately, I have exactly the same problem. I tried to add a 2px transparent border around the original image (texture), but that did not help, I still see the aliased borders. And yes, I am using the linear filter for the TextureAtlas.

What I don't understand is the fact that the transparent-border-trick seems to work for some guys here, for others it doesn't. But what is the cause for this issue -- is there likely to be a problem on the Java/libGDX programming side, or more likely on the creation/saving options of the graphics (texture)?

Thanks in advance!

Kind regards, Matthias

[Sippolo]

I'm just starting to think that the only way for not having this issue, is avoid creating textures with almost "perfect" lines, and blend/blur them as needed.
If, anyway, the problem is elsewhere, I'd really like to know a better solution than blurring everything

[kalle_h]

If you use transparent border trick you need to also draw that transparent area with image.
Example. I have 32x32 texture. If want image that is 28x28 size I put it to center of that texture. Then I draw 32x32 full texture region. In texture coord terms I draw from 0 to 1 in both x and y axels.
If minification is used then border might have to be little bigger. To avoid gray borders syndrome, transparent border should not be color(0,0,0,0) but color of the edge with alpha channel of 0. So white edge picture would use 255,255,255,0 as border color.

[Sippolo]

If you use transparent border trick you need to also draw that transparent area with image.
Example. I have 32x32 texture. If want image that is 28x28 size I put it to center of that texture. Then I draw 32x32 full texture region. In texture coord terms I draw from 0 to 1 in both x and y axels.
If minification is used then border might have to be little bigger. To avoid gray borders syndrome, transparent border should not be color(0,0,0,0) but color of the edge with alpha channel of 0. So white edge picture would use 255,255,255,0 as border color.

Thanks kalle_h for your reply!
I've used a texture with even 10px transparent border, and I'm almost sure I've drawn the whole texture (transparent border included) through the TextureRegion I've used (basically with height and width of the texture with transparent border included), but still I got the aliasing problem.
An even more strange example?
I tried to render a texture with a color-filled rectangle (like the one in pictures above) within another rectangle (a simple border rectangle), with transparent offset between the two, and I get the edges of BOTH rectangles with aliasing problem.
At this point there must be something I didn't get ^^

For the moment, I solved with a Gaussian Blur ranged from 0.5 to 2 pixels, but this way I wont have the fine sharp graphics I wanted

[brau0300]

I'm having a similar issue rendering a texture bound to a rectangular mesh with a perspective camera. Based on how my camera is configured, the rectangle appears like a trapezoid (e.g. like the intro text in Star Wars). The problem is the two slanted edges of the trapezoid are aliased.

I've tried applying the transparency-padding trick to the texture, but I suspect the linear texture filter is not getting applied as expected. For example, If I apply a small gaussian blur to transparency-padded texture in photoshop, the problem goes away.

In any case, after doing some research, I would like to try something like this:

http://stackoverflow.com/questions/1813 ... ased-lines

I'm a complete newbie to libgdx/opengl and I don't fully understand how textures are bound to meshes. Is it possible to bind a texture to only some of the vertices that define a mesh (e.g. the middle four vertices in the linked image)?

UPDATE If I increase the transparency padding to be about 30% of the original width on *each* side, the linear filter works much better. The smoothing still isn't as good as the gaussian blur of the edges in photoshop. I would still like to experiment with the transparent GL vertex idea, so would still appreciate if anyone has insight!

[billbo]

If minification is used then border might have to be little bigger. To avoid gray borders syndrome, transparent border should not be color(0,0,0,0) but color of the edge with alpha channel of 0. So white edge picture would use 255,255,255,0 as border color.

Thanks for the informative post. One question I have is, how does one actually create an image (assume PhotoShop) with an RGBA border like you noted above (255,255,255,0)? It seems that an image exported (png) in Photoshop with 100% transparent pixel doesn't seem to actually store the RGB portion. Is there a different image format that I should use? I do notice the gray border issues using PNG. Maybe it is just how I am setting up my alpha channel that is causing issues.