Sign in to follow this  
ehmdjii

that damn old textured alpha problem....

Recommended Posts

is there nothing we can do about it? i am talking of course about the problem when using textures with alpha channel and although i am sorting objects from back to front there might be polygons of the same object in front to back order which cause background pixels to shine through. here is a screenshot: are there maybe any tricks to avoid this problem using blending, alpha-test, depthmask? dunno....? any help is greatly appreciated!

Share this post


Link to post
Share on other sites
I'm not sure what you're talking about. The only issue I see in the screenshot are some minor aliasing artifacts. If those artifacts (the white pixels around the edge of your character) are indeed your problem, then you only need to adjust the alpha mask to give a tighter fit around the source graphic. Don't use antialiasing for your source graphic unless you can provide a 100% perfect alpha mask (Photoshop can do this). Instead, use antialiasing in your alpha mask, that way the edges of your source graphic get 'smoothed' by the mask itself instead of the antialiasing.

Share this post


Link to post
Share on other sites
To overcome this problem, make the colors of your image 'bleed' outside your alpha mask, preferrably all the way to the edges. Here's a exaggerated example of what I mean.



In case of having a outline around your image, make the background the same color as the outline. Hope this helps.

Share this post


Link to post
Share on other sites
thanks guys, but that's not the problem. the texture is ok, it's bleeded and the alpha mask is ok.

the problem is, that there are pixels from the objects from behind shining through, since not all polygons are correctly drawn from back to front.

Share this post


Link to post
Share on other sites
Please, for the love of God, use premultiplied alpha!

This blog entry explains it in great detail:
http://home.comcast.net/~tom_forsyth/blog.wiki.html#%5B%5BPremultiplied%20alpha%5D%5D

Share this post


Link to post
Share on other sites
thanks IvanMilles,

yeah i have heard about premultiplied alpha and it is probably the only solution i can take. but isnt it a bit hard to implement? i use PNGs btw.

Share this post


Link to post
Share on other sites
Quote:
Original post by ehmdjii
is there nothing we can do about it?

i am talking of course about the problem when using textures with alpha channel and although i am sorting objects from back to front there might be polygons of the same object in front to back order which cause background pixels to shine through.

here is a screenshot:


are there maybe any tricks to avoid this problem using blending, alpha-test, depthmask? dunno....? any help is greatly appreciated!


Have you tried zooming into youre images to make sure there aren't any artifacts/pixels left behind in the area that's supposed to be transparent?

It's easy to miss unless you make sure background is completely solid color you want to be for the alpha.

If you edited the picture in Paint Shop Pro etc use scratch remover on the edges to smooth them out? That is only if the problem only occurs along the edges, maybe will work, maybe it won't.

Share this post


Link to post
Share on other sites
Quote:
the problem is, that there are pixels from the objects from behind shining through, since not all polygons are correctly drawn from back to front.


You are confused. The pixel artifacts you are seeing is not due to your object sorting. The pixels are due to an effect called anti-aliasing, where 'soft' (semi-transparent) pixels are inserted along the edge of a 'jagged' line/curve to give a smooth, more natural appearance. In other words, the artifacts you are seeing aren't artifacts at all (in this context), but are an actual part of your sprite image. If you don't believe me, open the image+mask in a graphic editor, and place the image over a black background - you will see the same 'artifacts'.

The reason why you see the artifacts in your scene is because the color image uses anti-aliasing along it's edges. You should only use anti-aliasing on interior parts of the image, and save edge anti-aliasing for the alpha-mask (as 'Prototype' pointed out with his example).

Perhaps you could tell us what graphic editing software you are using so we can be more specific. Or perhaps you could upload your sprite images so we can show you how it needs to be done (I'd do it myself, but I'm lazy right now).

Here's an example:

This is my sprite while I'm editing it in Photoshop:

To the untrained eye, this looks fine, though I can already see the artifacts.
(Note that in this case with this specific red bunny sprite, the standard would be to use a full red square and let the alpha-mask do the rest of the work. However, I'm trying to step through the process in the somewhat the same way you would have.)

Here is the same sprite over a white background:

Looks perfect. The average person would leave it at this.

Here is the same sprite over a black background:

Notice the artifacts that weren't visible in the previous 2 examples. The artifacts are varying levels of pink as needed to give a smooth transition from red to white. From a distance, the artifacts look white, but if you zoom in, you will see that they are actually pink. With your sprite, the artifacts look white, but are actually varying levels of grey (transition from black to white). If they were in-fact pixels from distant objects 'shining' through, then these artifacts would change color as you move objects. I'm pretty sure this is not the case.

I can fix these artifacts in a number of different ways. The quickest fix would be to scale the alpha-mask down by 1 or 2 pixels. In this case, that would cause the edges of the sprite to not be smooth at all. The best fix would be to redesign the alpha-mask so that it does exactly what I need it to do.

[Edited by - swordfish on September 29, 2006 1:45:16 PM]

Share this post


Link to post
Share on other sites
u will need to create the image better (time consuming usually)
u have to make sure the alpha channel only contains values of 1 (where u want it to appear) or otherwise 0
dont use mipmaps + itll appear correctly

Share this post


Link to post
Share on other sites
I see artifacts in first texture already. So make your textere better. Don't use any compression algoritms in your file or in drawing. Just raw data. So you get only one colour to be alpha. Ban jpg etc. format you just get yourself to trouble.
Good way to hunt mistakes is next. You got white alpha so paint it black. Next go every single side trough pixel by pixel and check if any white is left. and paint it black.

Share this post


Link to post
Share on other sites
Quote:
Original post by ehmdjii
the problem is, that there are pixels from the objects from behind shining through, since not all polygons are correctly drawn from back to front.


The screenshot doesn't make that obvious, in fact it seems to hide that more than anything. It appears that you're drawing a single textured and/or shaded shape in the background, with the texture of the girl on the forground as either a decal or as more textured geometry.

Assuming that's the case, then if objects are being drawn out-of-order then you intend to have the full red shape in front of (and/or tinting) the girl. If the objects exist at different distances from the screen, then perhaps you're forgetting to allow the write to your z-buffer, or you're doing the sorting manually and you are simply drawing them out-of-order.

Since the screencap appears to be drawn with the girl nearer the camera than the red background shape, the problem appears to be that the alpha mask for the girl allows white pixels to be visible on the image.

What's your graphics editor/art program? Photoshop? The Gimp? If it allows it, try changing the default background color (the one that's painted behind transparent portions of the image) to something like that same shade of red. If you see the white then, it's definitely because of the alpha mask.

Disclaimer:
Please understand that we're not trying to be mean by all suggesting this, but it really, really does look like an alpha masking issue.

Share this post


Link to post
Share on other sites
Quote:
this is the code that will probably fix this

It is possible that this code will make some sort of difference, but I wouldn't suggest leaving it at this as the OP doesn't appear to understand exactly why he is seeing what he is seeing, what is causing it, and thus probably wouldn't understand why that code fixed his problem.

Quote:
the problem appears to be that the alpha mask for the girl allows white pixels to be visible on the image.

It seems that the artist digitally scanned a hand-drawn picture and loaded it into some graphic software. He then used something similar to Photoshop's 'Select Color Range' to select all the 'white' pixels and either delete them or knock them out with an alpha-mask. The problem is that there are 'white' pixels that aren't exactly white (they are gray) and may have not been selected for deletion (these are the artifacts). Since the artist is using .PNG image format, it makes me think that perhaps he/his graphics software has no concept of an 'applied alpha-mask', only the implied alpha-mask formed from the areas of the image that have no pixel data.

Tip: if you aren't using an applied alpha-mask (a black&white version of your sprite's transparency), then you need to manually remove the gray artifact pixels.

Another tip: you could vectorize your scanned drawing, and boom, you'll have a pixel-perfect alpha-mask.

[Edited by - swordfish on September 30, 2006 12:21:47 PM]

Share this post


Link to post
Share on other sites
thanks you all for your detailed replies, but i still dont think this is a problem with the texture. (the alpha mask is completely binary, there are not alpha values between 0 and 1. only true 0s and 1s, although they might become scaled later in the game when i use GL_LINEAR filtering, but im not sure)

it is more the problem which polygon gets drawn first.

here is another screenshot:



you can see that there are some violet pixels from the background shining through. but when the guy has the other leg in front these artifacts disappear.

and yes, playing around with the alphatest values could remove the problem too, but then the edges get way too sharp and i dont have these smooth borders i want.

[Edited by - ehmdjii on October 2, 2006 3:25:40 AM]

Share this post


Link to post
Share on other sites
*bump*

yeah, i noticed that if i set the texture filter to GL_NEAREST then this problem appears, however the edges are not anit-aliased and look terrible :(

any solution on this? thanks!

Share this post


Link to post
Share on other sites
I can give you a solution, but you won't be able to use it in OpenGL... though you may find something suitable. The problem seems to be your mip-mapping. It bleeds the pixels together to blur the final image. This will kill any sort of a boundary and will play hell with border transparencies.
The solution is to precompute your mipmaps and store them in an image format that will allow this. Look into .DDS files. Adobe Photoshop will let you pregenerate mipmap chains with a variety of filters to suit your needs.
Oh the irony.

Share this post


Link to post
Share on other sites
Quote:
Original post by blaze02
I can give you a solution, but you won't be able to use it in OpenGL... The solution is ... .DDS files...
You can create textures in OpenGL with DDS files just as easily as you can with any other file, even non-"image" formats. All a file is is a bunch of data, it's up to you to interpret that data in some meaningful way. You could make a texture with an MP3 file if you really wanted to; it might not look like anything, but again it's up to you to interpret it meaningfully.

To the OP... you're performing the solution already, just not on a fine enough level. If an object's polygons (that need blending) could move in front or behind each other and you can't deal with the artifacts, sort the polygons too. I suppose you could try something like depth peeling, but it's most likely not worth it. I feel that depth peeling still isn't viable for performance-critical applications yet. Sorting the polygons when needed will probably be more efficient, subject to the number of polygons of course.

EDIT: Fixed link

Share this post


Link to post
Share on other sites
thanks a lot!

how do you actually sort polygons? by their centerpoint?

and how do you exactly know, where they are in space. i only get their position relative to their position in the object they belong to? will i have to apply the modelview matrix to them?
isnt it a quite costly algorithm to sort polys?

Share this post


Link to post
Share on other sites
Quote:
Original post by ehmdjii
thanks a lot!

how do you actually sort polygons? by their centerpoint?

and how do you exactly know, where they are in space. i only get their position relative to their position in the object they belong to? will i have to apply the modelview matrix to them?
isnt it a quite costly algorithm to sort polys?
You can sort by nearest point, farthest point, or midpoint... they all give similar results and all have similar problems. You may want to account for polygons that intersect by splitting them. Maybe look into using BSP trees.

You can sort by object first. Then for objects that need their polygons sorted, sort their polygons in object space. In this case you will just assume that all of the polygons of an object A "in front" of an object B will be "in front" of all of the polygons of object B. This also may not be the case and if your app can't have the artifacts associated with that assumption then you'll have to sort the polygons of both objects together. With possible state changes this can quickly become very expensive.

Sorting polygons is a pretty costly option, yes. Depending on your scene you may want to go with something like depth peeling, but if you don't need to sort all that many polygons per frame I think sorting will be the much faster option. There are probably some good resources out there on polygon sorting so try googling some.

Share this post


Link to post
Share on other sites
Quote:
Original post by ehmdjii
*bump*

yeah, i noticed that if i set the texture filter to GL_NEAREST then this problem appears, however the edges are not anit-aliased and look terrible :(

any solution on this? thanks!

i think u mean disappears
the problem is not sorting but the image generation
u might think its just 0 + 1 but using linear or mipmaps u get the computer going (0+1)/2 = 0.5 (actually operates on more than 2 pixels), hence the border
u will most likely have to generate mipmaps yourself, timeconsuming

Share this post


Link to post
Share on other sites
quote "i think u mean disappears"
yes i do :)


the thing is that i want those smooth antialiased edges. binary alphachannels would make pretty much destroy the look and feel of my game. :-/

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this