Image transparency - Color-keying and Alpha-blending

Published 01 FEB 2013 at 02:03:32PM

Earlier versions of OpenInsight have supported basic image transparency via a method called "color-keying", where a specific color in the image is nominated as the transparent color (by default the color of the top-left pixel).  When the image is drawn to screen the pixels that match the transparent color are not rendered so the background pixels show through instead.  Whilst this can be effective in simple cases it is sub-optimal for images that have smooth curves and shadows as these tend to appear very pixelated: You can see this in the example from OpenInsight 9.3 below, where a bitmap with a white background and a slight shadow is rendered to a non-white background:

[caption id="attachment_627" align="aligncenter" width="263"] Color-Keyed bitmap showing pixelated edges[/caption]

A much better alternative is to use an image format that supports an "alpha channel" such as a PNG file*. Basically this means that each pixel in the image has an extra byte that describes it's transparency - a value of 0 means that the pixel is totally transparent, while a value of 255 means that the pixel is totally opaque, Values in between are used to calculate how the image pixel is combined with the background pixel when drawn, so that it gives the appearance of being translucent, allowing the background pixel to show through to some degree.  This is a technique known as Alpha-blending.

With version 10 we've taken the opportunity to re-visit OpenInsight's image handling so it respects the alpha channel properly - you can see this in the example below, where the same image is loaded from a PNG file rather than a standard BMP file:

[caption id="attachment_638" align="aligncenter" width="276"] Alpha-blended PNG bitmap with smooth edges and shadow[/caption]

We have also take this one step further and provided the ability to specify a transparency setting for the entire image when it is rendered, so you can create an effect like a watermark:

[caption id="attachment_641" align="aligncenter" width="274"] Alpha-blended translucent image on a gradient background[/caption]

Note that this effect also applies to color-keyed and non-transparent bitmaps too, which of course are still fully supported so you won't need to change your existing applications unless you want to. In the next post we'll take a look at some of the new image-specific properties that support this functionality.

* (PNG image files have always been supported in OpenInsight but the alpha-channel has never been respected, thereby limiting them to basic color-keying for transparency effects).

(Disclaimer: This article is based on preliminary information and may be subject to change in the final release version of OpenInsight 10).

Comments


At 02 FEB 2013 06:22AM BarryStevens wrote:

Cool!

Original ID: revdevx.wordpress.com/?p=626
  • third_party_content/community/commentary/revdevx/16469.585787037.txt
  • Last modified: 2024/01/29 20:23
  • by 127.0.0.1