Transparency (computer graphics)
In computer graphics , transparency refers to image elements that allow the content of the elements underneath to be fully or partially visible.
The opposing terms transparency and opacity (opacity) describe the identical property; In addition, there are the gradations mentioned as semi-transparent.
overview
When combining several graphics in one file, originally only completely opaque elements could be used. If two elements were on top of each other, the element below was completely covered. The implementation of translucent elements, however, is more demanding. Here, a transparency or opacity (derived from the physical terms opaque (light-impermeable) and transparent (translucent, translucent)) must be specified for each element , i.e. the measure of how much the content on the lower levels should be covered.
Previously, corresponding native transparencies could only be saved in a few image file formats. For most of the other formats, a transparency reduction had to be carried out before the output , in which the transparent elements are "flattened" to a level based on the preset opacity values. However, any existing vector elements are rasterized.
More modern vector (such as SVG , EPS and EMF ) and raster graphics formats (such as PNG ) also allow the definition of picture elements as completely transparent or save an alpha channel in addition to the color information (R – G – B) . In the meantime, the degree of transparency can be specified as often as desired for any number of superimposed elements.
For display on the screen as well as for printing, all transparency information for each image point ( pixel ) must be added up (as well as the color information).
Two-dimensional realizations
Transparency mask
The simplest and oldest method is to save it as a separate transparency mask, initially for raster graphics (bitmaps).
The mask is a rectangular matrix that contains exactly 1 bit for each pixel . The image generation then follows the following rule for each image position:
- If transparency bit is set
- then take information from the background image
- otherwise
- use the foreground image.
The first important application appeared in connection with mouse pointers (cursors). Software and graphics hardware can only process rectangular areas, i.e. the smallest rectangle that encloses the figure of the cursor (for example an arrow or a hand with an index finger). If the cursor is now moved over the screen surface (desktop), the calculation must be carried out as quickly as possible. For this purpose, the rectangle is temporarily stored with an undisturbed background, then the cursor image is combined with the background using a transparency mask and displayed. If the cursor continues to move, the cached, undisturbed background image is restored and the procedure is repeated for the new cursor position. This process was soon fully or partially incorporated into the hardware of graphics cards so that the actual computer ( CPU ) itself was no longer burdened.
Since Windows 3, the transparency mask technology was also available for Microsoft icons . Both the (opaque) image in DIB / BMP format and a matrix with the transparency mask were saved in the .ICO file so that the image could be combined with the desktop as desired. Also TIFF allows the definition of transparency masks for the combination of the individual images in this container format .
In addition to the older bitmap transparency mask, the same technique can also be used on areas in (scalable) vector graphics ; here the separate mask object is linked with logically related image objects ( primitives , layers , groups). The resulting effects result in a view through a keyhole or a clipping of the foreground image. This also applies to the combination of the entire image in mixed and container formats (metafiles) such as PDF or in word processing using OpenDocument and Microsoft Word .
The assignment of whether the value "0" should mean transparent and "1" opaque or vice versa is not the same in the various graphic formats and can sometimes lead to black rectangles appearing or image planes appearing to have disappeared during conversions.
If software or even hardware is occasionally claimed to be able to handle any non-rectangular area, then internally a transparency mask is used.
Transparent image color
The first direct inclusion in the picture was made by assigning one of the picture colors to be considered transparent.
This meant that one of the 16 VGA colors or one of the 256 colors in a palette was no longer available.
Probably the best-known application of this method was introduced with the transition from GIF87a to GIF89a in Graphics Interchange Format . PNG replicated this later, but also expanded it to include the alpha channel as an alternative .
This technique was common in the 1990s; it did not require any additional resources in terms of storage or transmission capacity and met the possibilities of the hardware available at the time. The files are even smaller than when using the separate transparency mask.
Semi-transparency
In order to obtain semi-transparent image overlay as well as greater flexibility and design options, in addition to the two extreme values “fully transparent” and “fully opaque”, graduated transparency values were introduced.
The ratio values for transparency and opacity always add up to 1 - for example, 30% transparency results in an opacity of 70%. The transparency value then indicates what proportion of information in the background image is to be incorporated, the remaining weighting is assigned to the foreground image.
The most important characteristic here is the so-called "alpha value", with which the three RGB color values (red, green, blue) have been expanded by a fourth code. This combination of four bytes is usually referred to as RGB / A or aRGB, see Alpha channel . The color value can then be assigned to the picture elements - both individual pixels and (scalable) objects of the vector graphic.
The “alpha byte” allows 256 different gradations, with “0” standing for “fully transparent” and “255” for “fully opaque” (ie covering); strictly speaking, it is an opacity value.
The advantage of the alpha value is that the hue of the picture element does not change, only its brightness. This enables much simpler and faster calculations and simplifies the specification by the human draftsman.
In addition to this binding to an RGB color value, the alpha value (alone) can also be assigned to an entire image layer or an entire inserted image. This means that image levels can be switched on and off logically:
- If an image layer is switched to "fully transparent", it has apparently disappeared;
- if it is set to “fully opaque”, the result depends on their picture elements:
If it is RGB values, then only this picture element is visible in the foreground; if it is RGB / A, then the transparency depends on this.
A semi-transparent image plane is also possible: If the image elements are defined as RGB, each element is, so to speak, uniformly expanded to RGB / A; if they are already RGB / A, then both transparency values are multiplied together.
Finally, a transparency mask can also contain alpha values instead of the simple visible / invisible one.
More than two image levels
The combination of the two foremost image levels is always considered. The respective background image can itself have been created as an overlay image of two image levels. Using recursive processing - starting with the two lowest images - any number of image levels can be combined.
Overlay of color images
Overlaying color images transparently is tricky, especially when the image layers are moved against each other.
Most of the time, the color mixture (i.e. the ratio of R, G and B to each other) is taken over from the foreground image. The image layers behind it only provide gray values that influence the brightness of the foreground color. The transparency value indicates how strong this influence should be. This method is often used when an object (represented by an icon or thumbnail ) on a desktop is to be moved with drag and drop . The contours of the background shimmer through the moving object and make it possible to safely aim at the desired target area.
Alternatively, in this situation, the moving object in the foreground can be displayed as a gray-scale image and the color mixture is taken over from the rear image planes. The transparency value is included in the calculation of the brightness.
However, if the values of the color channels R, G and B are simply calculated arithmetically separately from each other with image planes moving against each other, a psychedelic rush of color and completely unexpected and unpredictable colors of the overall image occurs.
There are different formulas for statically superimposed image planes in order to take into account both color values and to calculate a resulting overall color according to the rules of additive or subtractive color mixing . The RGB model is unsuitable here and there is a regular change to the HSB display; the saturation S (saturation) as well as the lightness B (brightness) correlate with the opacity value. Whether this leads to a satisfactory visual impression in individual cases must be assessed by the human observer. It would correspond to the view of the world through a color slide; the expectation of this mapping must be defined.
Single picture
The transparency value actually only makes sense if several image layers are superimposed. If there is only one image level, the value is usually ignored. Alternatively, it is occasionally used to assign a "pallor" to the picture; with full transparency it would then not be visible - a seldom meaningful interpretation.
Three-dimensional
All of the above explanations relate to 2-D images, i.e. image foils are placed directly on top of one another.
In 3D computer graphics, objects can have translucent material properties. In volume graphics , objects consist of voxels , each with a certain opacity; There are several options for displaying ( image synthesis , rendering ) such objects. With other types of modeling , the material properties are uniformly applied to the entire object. The volume scatter is often modeled here by a phase function with absorption and scattering coefficients. The Lambert-Beer law is applicable here: incoming light rays are exponentially attenuated by the medium . The volume scatter can be rendered using Monte Carlo ray tracing or photon mapping .
References and comments
- ↑ TIFF: Day 254