Optimizing the display of texture with alpha

[thomascheah]

Hi,

If I had an image that contains line networks, that looks like below,



what is the best way of apply this type image as texture on a 3D plane that will give the most optimum appearance? Note that the white color area supposed to be transparent. If you are interested in experimenting it, I had prepared the image with transparency info as a PNG file that can be download from,

http://www.objectiveworld.com/tmp/alpha_map.png

I had tried different texture settings like enabling Trilinear Filter and Anisotropic Filter but still looks rather unsatisfactory. Here are some sample shots,

When view at normal distance, it looks kinda reasonable,


When view at near distance, it looks very jaggy,


When view from far distance, it looks crappy,


For some reasons, as you can see from the screenshots above, it seems that the anti-aliasing is not enabled, though I don't know why. But if the transparency information is not present in the image, it looks so much better,

Normal distance,


Near,


Far,


Again, if you are interested, the image that I used for the tests above are located at,

With alpha channel,
http://www.objectiveworld.com/tmp/alpha_map.png

Without alpha channel,
http://www.objectiveworld.com/tmp/noalpha_map.png

I wish I can get some advice here. Thanks in advance for any inputs.

[JP]

Your texture's dimensions are not power-of-two which will cause the image to be scaled up to the nearest power-of-two and will results in it being stretched and distorted. To fix this just change the image so it's a power-of-two (i.e. 128,256,512 etc, doesn't have to be square so could be 128x256).

You can obviously just put a white border around the edge of the picture to make it up to the power-of-two dimensions.

[hybrid]

Which driver did you use? Try all working ones. Also try to scale/extend the image to 1024x1024 pixel and check again if the appearance becomes better. You could also try to disable mipmapping for more complete far distance appearance.

[thomascheah]

Thanks for the quick response. I wish I can scale the texture size into power of 2, but it is not possible in my case, as the image is specified by the user, the most I can do is scaling either its Width or Height to be power of 2, and the other dimension will have to scale proportionally.

Thus, I had actually turn off Mip Mappings, otherwise it looks far more worst. I am using Direct3D 9 driver by the way. I know Hybrid is more on OpenGL, but I wish some DirectX developers out there can help me out.

Thanks again!

[thomascheah]

Sorry I noticed that the MipMap flag is activated. I had disabled it and update the screenshots above. Still looks somewhat unsatifactory.

[hybrid]

Well, you could manually pad it: Load it as an IImage, not as a texture. Then get the next POT dimension suitable. Create a byte area of that size (times the desired depth) and memset(0xff) it. Then copy your image into the memory area line by line (leaving out the final columns and rows at the end). Then create an image and a texture from that memory area.
I know it's a bit clumsy, but it should give you fa better results (for a test you could of course first do that extension with Gimp and see if it helps at all).

[williamlai3a]

Thanks for the quick response. I wish I can scale the texture size into power of 2, but it is not possible in my case, as the image is specified by the user, the most I can do is scaling either its Width or Height to be power of 2, and the other dimension will have to scale proportionally.

Thus, I had actually turn off Mip Mappings, otherwise it looks far more worst. I am using Direct3D 9 driver by the way. I know Hybrid is more on OpenGL, but I wish some DirectX developers out there can help me out.

Thanks again!

Just a littel bit suggestion, dunno whether is useful in your case.....

You could try to make use of photoshop, open a power of 2 blank image, that is enough to paste your image into it. Then, you can indeed extended your image size without scaling the image content non-proportionally. That actually means to add more blank area it.....
Moreover, photoshop CS2 can increase the number of pixels without causing the distortion problem.

Hope this help.

[JP]

i guess doing that, working with a power-of-two texture just now would be a good idea to make sure that that's what's causing your problem (unless you know that already) so then you can confirm that a POT texture would solve your problems, then you can do what hybrid suggests and safely scale up whatever the user inserts to POT.

[BlindSide]

BlindSides solution:

- Take rendertarget of background without object.
- Render object whilst projecting this background from the cameras POV.
- Take numerous samples in the pixel shader to anti-alias the transparency.
- Make sure to output Depth in the pixel shader along with colour information, this will allow it to fit in nicely with the scene.
- Add refraction effects whilst youre at it.

Cheers

[thomascheah]

Thanks for all inputs. Appreciate them!

BlindSide's solution seems very creative, though requires great deal of precision in order to be precise.

For the rest, I am not sure whether the rendering quality is indeed caused by non-POT texture dimension. As you can seen from my tests above, both textures (alpha and non-alpha) has the same dimension and they are not POT. But the texture that does not contain alpha information looks better where it is obvious that anti-aliasing is applied, while the texture with alpha isn't. By the way, all the screenshots taken above is with CreateMipMaps flags disabled.

[thomascheah]

Ok, just did a quick test. I tried making the texture above has a dimension of 1024 x 1024 by padding extra space, and it still looks yucky. Can't see any significant improvements than before.

I just got a feeling that whether it could be the texture anti-aliasing works better without alpha information as it knows exactly about its background color and anti-aliasing can blends nicely with it. Whereas if the texture contains alpha information, like in my example, the white area is totally transparent, there is no feasible way for the anti-aliasing to work against the actual scene background that is behind the scene node.

I hoped I am wrong, as if I am right, it seems that there won't be any easy solution for it.

[hybrid]

The transparent materials use MaterialTypeParam to set the threshold (and hence the smoothness) of blending. Try to set it to some small value in order to get a better blending effect.

[sio2]

A Sobel filter for edge detection may help.

You cannot mip NPOT textures on older hardware - newer graphics hardware does support mipping NPOT textures.

Alpha feathering may also help instead of just plain alpha testing (transparency).

Lastly, your data looks originally vector based. If you had the original lines that the image was made from you could draw those as anti-aliased lines (via your own emulation on DX9).

[KikeG]

I had a similar problem using 3d planes with textures for 2d sprites with rotation and scaling.

I set EMT_TRANSPARENT_ALPHA_CHANNEL for the material type, but in order for the texture alpha to blend well always I had to set MaterialTypeParam of the material to a low value, say 0.1f or 0.01f.

I did:

scenenode->getMaterial(0).MaterialTypeParam = 0.1f;

And then load the texture and assign it to the scenenode with setMaterialTexture

[Kriolyth]

I had a look at the Alpha-to-Covreage example from NVidia SDK (AtoC also available for ATI cards), what it does is like anti-aliasing for transparent textures. I'm just not sure, whether this can be implemented in Irrlicht without updating the engine itself.