Hello all. I've been using these forums for a while now to figure out various DirectX issues I've had. So let me start by saying thanks to all that respond to these posts. That being said, let me dive into my problem.. I'm creating a view control of sorts for an application. I have a circle that will be spun around by the user for a Z-rotate. It looks like this.. What I wanted was that circle to "float" on top of whatever was on the screen in the corner. So, I loaded it as a texture using a transparency color key of white. I mapped the texture onto 2 triangles. It looks okay until I start rotating it. That's when it gets very ugly because of all the jaggies it creates. Here is a shot if it. From what I can tell, the problem is basically an issue of antialasing, and becase DirectX has no way to know those are edges, it does nothing to soften the pixels around the edge of the circle. I did some research and read about using different AA techniques that will in fact account for and correct this problem. I tried setting that up in DX and couldnt get it to build my device. I tried manually setting it on my graphics card settings and did notice that it was a bit cleaner, but it was still pretty bad. Any ideas on how I can fix this issue? Or am I going about this the wrong way? Any help is greatly appreciated. This issue has ruined my weekend. :(

Quote:Original post by Sc4Freak
The best you can do is to use alpha blending to elimiate jaggies.

Yes, you need to include an alpha channel (32-bit image) with your texture instead of creating one at run time based on pixel color. Pixel color and alpha value should be independent for best results (without going into premultiplied alpha).

Even linear filtering can't save you from the problems of using a 1-bit mask. Is there a reason you can't use an 8-bit mask (256 values) instead of color keying? As far as image formats, .PNG and .TGA are the easiest choices.

I thank you both for your responses.

I can use anything I'd like, I just have no experience creating images with the alpha channel. I apologize for my ignorance, but would I just apply an alpha amount to the edges of the circle so it will blend cleaner..?

Thanks again guys.

OK I see what you are saying. I have done some of that transparent background stuff in photoshop. But what I dont get is how is this different that loading the texture w/ a transparent key color of white? In both cases, don't I just end up with all white pixels as transparent?

What am I missing?

Again, I thank you all for taking the time to help me out.

Quote:Original post by MJP
The easiest way to do this would be to load up your image in Photoshop (or your image editor of choice) and simply erase the white background portions of the image.

This is kind of misleading -- this will give you the exact same results as you're getting right now (as you suspected). You have a mask that is 1-bit: either on or off, and I think that's what is giving you the jaggies. You want a mask like this one (on the left), not what you're using (which is like the one on the right):



You keep saying 'transparent' but 'translucent' is what you really want. The ugly fringe pixels you're seeing need to be partially blended with the background. To accomplish this you need to create the artwork or modify it to have a true alpha mask; that is, some pixels will be 7% visible, others will be 36% visible, etc. In other words, your mask needs to have grayscale/intermediate values instead of going straight from 0% to 100% at the boundary.

If you have access to the program that created your ring in the first place this may be an option. Otherwise you may be able to use a program like Photoshop to extract a full range mask using some trickery. For best results you want to avoid compositing your image RGB with a white (or any other color) background because you can get fringe artifacts if you're not extremely careful. All of this depends on your artwork pipeline and where you're getting your images from (an artist? a 3D rendering package?) so let us know if you need more help...

Here's a slightly better example of what your image and alpha mask should look like (although I couldn't do a great job since you only posted a low res JPG). Just note that once you've composited the image onto a background you've already lost important information. Your eventual output should look something like this: (RGB on the left, Alpha channel on the right). Note that the alpha channel contains gray values that are impossible to retrieve when you use color keying.

Thank you for taking so much time to make it clear. I do understand what the issue is, and I do see how having a gradient amount of apha blending would soften the edges. I guess my problem now is that I just dont know how to make that alpha mask like the one you created.

I'm a bit out of my leauge getting so wrapped up in this image stuff. I'm more of a coder than I am an artist, and I have limited experience with graphic manipulation. That inital image I posted was created by me with some quicky DirectX mesh draws and some basic lighting. Then I just dumped that backbuffer into a bitmap image. What I was thinking I should do is:

1. Rerender that circle image with a black background and better antialising.
2. Take that BMP into photoshop and create a PNG file that contains an alpha channel with something like you created.
3. When I load my texture into my app, I would not bother with setting a transparent color key, but I would continue to turn aplha blending on when rendering the 2 triangles that contain my circle image.

This should provide me with a softer looking circle. Am I one the right track with this? I just want to make sure before I spend the time learning how to create this scary alpha masking stuff.

As always, thanks!

Quote:Original post by dxcoderheadaches
Am I one the right track with this?

Yes, you're definitely on the right track. No color keying, just load the image (and alpha channel) and render with alpha blending enabled and you'll get good results at most scale (and all rotation) settings. As a side note, if your output is considerably smaller than the texture file (pixels < texels) then the mipmap settings may come into play, but if your output is anywhere near 1:1 or larger this won't matter.

If you're creating your texture map using the output of a DirectX render there's probably some fancy method involving render targets to do this correctly.

If you just want a quick fix, here's what I suggest: render your image with a white (or green or whatever) background, but do it much larger than you need. If your texture is going to be 256x256, then set a high resolution and make the object larger before 'just dumping that backbuffer into a bitmap image' of at least 1024x1024 pixels. Then you can load the bitmap into Photoshop, delete the background and resize the image (bicubic, of course!) down to 256x256. This is a cheap way of performing 4x antialiasing but done properly it should give you the results you're looking for.