Smoothing edges

Anything libgdx related goes here!

Re: Smoothing edges

Postby berserker.devel » Mon Sep 26, 2011 12:10 pm

Mercury wrote: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 :D

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.
berserker.devel
 
Posts: 41
Joined: Tue Aug 30, 2011 3:25 pm

Re: Smoothing edges

Postby doomtoo » Thu Oct 27, 2011 5:25 am

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)
Check out my website, and let me know what kind of tutorials you want!
http://www.chrismweb.com
doomtoo
 
Posts: 144
Joined: Mon Jun 13, 2011 6:03 am
Location: Arizona

Re: Smoothing edges

Postby Sippolo » Thu Feb 02, 2012 8:39 pm

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
box.png (866 Bytes) Viewed 1997 times


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

box2.png
box2.png (1.77 KiB) Viewed 1997 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
 
Posts: 67
Joined: Thu Jan 12, 2012 12:19 pm
Location: Italy

Re: Smoothing edges

Postby Sippolo » Fri Feb 03, 2012 10:23 am

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
box3.png (2.89 KiB) Viewed 1981 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 :D ), but this issue is really pissing me off..
Please help clearing my ignorance on this :oops:


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? :cry:

This is what I achieved:

box4.png
box4.png (3.33 KiB) Viewed 1980 times
Sippolo
 
Posts: 67
Joined: Thu Jan 12, 2012 12:19 pm
Location: Italy

Re: Smoothing edges

Postby haimat » Fri Feb 03, 2012 12:27 pm

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
haimat
 
Posts: 60
Joined: Sat Aug 20, 2011 12:28 am

Re: Smoothing edges

Postby Sippolo » Fri Feb 03, 2012 1:17 pm

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 :|
Sippolo
 
Posts: 67
Joined: Thu Jan 12, 2012 12:19 pm
Location: Italy

Re: Smoothing edges

Postby kalle_h » Fri Feb 03, 2012 6:30 pm

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.
kalle_h
 
Posts: 648
Joined: Thu Dec 29, 2011 9:50 pm

Re: Smoothing edges

Postby Sippolo » Fri Feb 03, 2012 7:03 pm

kalle_h wrote: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 :|
Sippolo
 
Posts: 67
Joined: Thu Jan 12, 2012 12:19 pm
Location: Italy

Re: Smoothing edges

Postby brau0300 » Mon Feb 27, 2012 5:51 am

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!
brau0300
 
Posts: 2
Joined: Mon Feb 27, 2012 5:43 am

Re: Smoothing edges

Postby billbo » Wed Jun 06, 2012 9:13 pm

kalle_h wrote: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.
billbo
 
Posts: 11
Joined: Wed Jun 06, 2012 8:47 pm

PreviousNext

Return to Libgdx

Who is online

Users browsing this forum: Bing [Bot], Google Feedfetcher and 12 guests