Bleeding Color in Linear Filtered Textures

Started by
14 comments, last by LeGreg 17 years, 11 months ago
Hi, I'm working on a 2D game with Direct3D version 2. I create all my textures as 32-bit with an alpha channel and use bilinear filtering for both scaling down and scaling up. The textures have a opaque portion surrounded by a black field that has an alpha of 0. When I display the textures with the nearest filter, they look OK, but when I use the bilinear filter the opaque parts of the image get blended with the black and so they have a dark border around them. In OpenGL, I was able to fix the problem of bleeding color by making the surrounding pixels black (a=0,r=0,g=0,b=0). In Direct3D it still bleeds anyway; apparently they must use different algos for bilinear filtering. I want to be able to have an alpha gradient in images, rather than just all-or-nothing transparency. Is there anyway I can keep the border from showing?
Advertisement
Adding a 1-pixel border around your sprite textures should be enough in Direct3D as well (I'm not 100% sure on this btw [smile])

The only thing I can think of is that if you are using the D3DXSprite interface and not making sure to pass it a RECT that reflects the added pixel border you would still be facing the same bleeding problems. The same could be said for screen-aligned quads and their texture coords.

All the best,
ViLiO
Richard 'ViLiO' Thomasv.net | Twitter | YouTube
I'm just drawing a textured quad with DrawPrimitive.

The border is a result of the opaque color blending with the transparent background color when linear filtering is used.
Quote:Original post by JonWoyame
Sorry if I was unclear, but I'm actually trying to get rid of the border thats around the sprites.

The border is a result of the opaque color blending with the transparent background color when linear filtering is used.

Assuming i'm still not misunderstanding on this [wink] ....i'll expand on what I had said previously.

I am suggesting that in your paint program you add a 1-pixel border around your texture (ie the edge colour and alpha is extended out by 1 pixel in all directions). Then you shift your texture coords (or RECT for D3DXSprite) in by one pixel. This now means that when filtering, the outmost pixels of your sprite will get filtered with the added 1-pixel border.

Hope this helps, [smile]
ViLiO
Richard 'ViLiO' Thomasv.net | Twitter | YouTube
I shouldn't really say "border", it is a black outline around the image contents. For example, I have a hand cursor texture, and the cursor has a dark outline around it because it is blending with the neighboring black pixels which have an alpha of 0.
Ok, diagramatics time [lol]

Let's say we have a sprite ..we'll call him whiskers [wink]

When whiskers is filtered, the outer ring of pixels will get filtered with some full black opaque pixels (assuming this is correct for Direct3D [smile])
This will of course cause some artifacts as we want to have the white pixels transparent.

One solution is to add a border (or padding) of pixels around the outside of the sprite (this can be done in your paint program or you can modify the image yourself when you load it as a texture into Direct3D).
Here's one we prepared earlier ...


Now if we were to load and use this texture exactly as before the artifacts would still be there as the outer ring of white pixels would still be getting filtered with some black ones. So the solution is to shift your uv coords in by 1 pixel on all sides
Like so....


This now means that that very outer ring of pixels will still get filtered with some black ones, but they wont be part of out visible texture. And the ring of pixels just inside our uv area (the red line) will have valid neighbouring pixels all around them so zero artifacts [grin]

As I said this is one solution, there are others [wink] ...

You could just shift the uv coords in by half a pixel without adding any padding pixels ..this works but can still lead to the same artifacts problems when you scale sprites

or

You could clamp the texture ...this won't work if you are wanting to have more than one sprite per texture (sprite sheets)

Seriously hope this helps [lol]
ViLiO

[Edited by - ViLiO on May 19, 2006 4:33:00 PM]
Richard 'ViLiO' Thomasv.net | Twitter | YouTube
ViLiO,

He isn't getting a bleeding from sampling at the edges of the texture - it's because his transparent areas within the texture are black. If you take the image you posted and imagine that the white area around the object (cat?) is black and has an alpha of 0, that is what I think his image looks like. It's hard to tell but it almost sounds like he doesn't have alpha blending enabled.


You want to set up an alpha test on the pixels, so that way any pixel that is below a certain alpha threshold is tossed before it even gets processed. This should solve your bleeding issues, because the edges will have nothing to bleed with.
Quote:Original post by JonWoyame
I shouldn't really say "border", it is a black outline around the image contents. For example, I have a hand cursor texture, and the cursor has a dark outline around it because it is blending with the neighboring black pixels which have an alpha of 0.

Oh, do you mean something like ..
?
...and you don't want the white pointer to have a dark border around it when filtering and alpha-blending?

Cause if that is the case then adding the padding could be done around the pointer itself and not the edges of the whole texture. You could take the colour from a neighbouring light-coloured point pixel and the alpha value from a neighbouring dark mask pixel and it would probably work.

If this ain't it then maybe you should provide some screenshots yourself [wink]

All the best,
ViLiO
Richard 'ViLiO' Thomasv.net | Twitter | YouTube
That isn't the problem. The problem is he is using linear filter on the texture. This causes the textures colors to blend together in order to get rid of the pixelation. Since he is using alpha-blending, the edges of the sprite that touch the transparent part of the texture are blending. Think of it like this: You have an image that has a color of red, and right beside it you have a completely transparent color of black. Because of the linear blending, instead of it just ending at the red like he wants, the colors blend from the red to the transparent black and it leaves an outline. To get rid of this you can add an alpha test that will discard those pixels so they will not be processed in the linear filter.

This topic is closed to new replies.

Advertisement