Spring 2008 6.831 User Interface Design and Implementation 1Lecture 20: Alpha Compositing UI Hall of Fame or Shame?Spring 2008 6.831 User Interface Design and Implementation 2Source: Interface Hall of Shame Once upon a time, this bizarre help message was popped up by a website (Midwest Microwave) when users requested to view the site’s product catalog. The message appears before the catalog is displayed. Clearly this message is a patch for usability problems in the catalog itself. But the message itself has a lot of usability problems of its own! How many problems can you find? Today’s Topics• Alpha channel• Antialiasing• Alpha compositing rules•MasksSpring 2008 6.831 User Interface Design and Implementation 3 Today’s lecture is about alpha compositing – the process of using the transparency value, alpha, to combine two images together.Transparency• Alpha is a pixel’s transparency– from 0.0 (transparent) to 1.0 (opaque)– 32-bit RGBA pixels: each pixel has red, green, blue, and alpha values• Uses for alpha– Antialiasing– Nonrectangular images– Translucent componentsSpring 2008 6.831 User Interface Design and Implementation 4 In many graphics toolkits, the pixel model includes a fourth channel in addition to red, green, and blue: the pixel’s alpha value, which represents its degree of transparency. AntialiasingSpring 2008 6.831 User Interface Design and Implementation 5SimpleAntialiased Recall that antialiasing is a way to make an edge look smoother. Instead of making a binary decision between whether to draw a pixel near the edge completely (opaque) or not at all (transparent), antialiasing uses an alpha value that varies from 0 to 1 depending on how much of the pixel is covered by the edge. The alpha value causes a blending between the background color and the drawn color. The overall effect is a fuzzier but smoother edge. Alpha Compositing• Compositing rules control how source and destination pixels are combined• Source–Image– Stroke drawing calls• Destination– Drawing surfaceSpring 2008 6.831 User Interface Design and Implementation 6 When pixels include alpha values, drawing gets more interesting. When you draw on a drawing surface – whether it’s using stroke calls such as drawRect(), or pixel copying like drawImage(), there are several ways that the alpha values of your drawing calls can interact with the alpha of the destination surface. This process is called alpha compositing. Let’s set up the situation. We have a rectangle of source pixels, which may be an image, or may be the pixels produced by some drawing call. We also have a rectangle of destination pixels, which is the drawing surface you want to modify. Alpha compositing determines what the resulting destination pixels will be after the source drawing is applied.Porter-Duff Alpha Compositing RulesSource pixel [RsGsBsAs ]Destination pixel [ RdGdBdAd ]1. Premultiply RGB by A[RGB]s= [RGB]sAs[RGB]d= [RGB]dAd2. Compute weighted combination of source and destination pixel[RGBA]d= [RGBA]sfs+ [RGBA]dfdfor weights fs, fddetermined by the compositing rule3. Postdivide RGB by A[RGB]d= [RGB]d/ Adunless Ad== 0Spring 2008 6.831 User Interface Design and Implementation 7 The compositing rules used by graphics toolkits were specified by Porter & Duff in a landmark paper (Porter & Duff, “Compositing Digital Images”, Computer Graphics v18 n3, July 1984). Their rules constitute an algebra of a few simple binary operators between the two images: over, in, out, atop, and xor. Altogether, there are 12 different operations, each using a different weighted combination of corresponding source pixel and destination pixel, where the weights are determined by alpha values. The presentation of the rules is simplified if we assume that each pixel’s RGB value is premultiplied by its alpha value. For opaque pixels (A=1), this has no effect; for transparent pixels (A=0), this sets the RGB value to 0. After the composition, the multiplication by alpha is undone by dividing each RGB value by the (final) alpha value of the pixel. If we were going to do a sequence of compositing operations, however, we might skip this step, deferring the division until the final composition is completed. (Java gives you an option, when you create an offscreen image buffer, whether you want the RGB values to be stored premultiplied by alpha; this representation will allow faster compositing.) Simple Copyingclear fs=0, fd=0[RGBA]d= 0src fs=1, fd=0[RGBA]d= [RGBA]sdst fs=0, fd=1[RGBA]d= [RGBA]dSpring 2008 6.831 User Interface Design and Implementation 8 Here are the three simplest rules. They’re not particularly useful in practice, but they’re included to make the algebra complete. clear combines the source and destination pixels with zero weights, so the effect is to fill the destination with transparent pixels. (The transparent pixels happen to be black, i.e. RGB=0, but the color of a transparent pixel is irrelevant.) src replaces the destination image with the source image. dst completely ignores the source image, and leaves the destination unchanged.Layeringsrc over dst fs=1, fd=1-As[RGBA]d= [RGBA]s+ [RGBA]d(1-As)dst over src fs=1-Ad, fd=1[RGBA]d= [RGBA]d+ [RGBA]s(1-Ad)Spring 2008 6.831 User Interface Design and Implementation 9 The next two rules produce layering effects. src over dst produces the effect of drawing the source pixels on top of the destination pixels. Wherever the source is opaque (As=1), the existing destination pixel is completely ignored; and wherever the source is transparent (As=0), only the destination pixel shows through. (Note that RGBs=0 when As=0, because we have premultiplied by alpha). If the source is translucent (0 < As < 1), then the final pixel is a mix of the source and destination pixel. dst over src produces the opposite effect – putting the source image behind the destination image. This is one way to affect drawing Z-order without having to change the actual order in which drawing calls are made. Be careful, though – in order for dst over src to succeed in a useful way, the destination image buffer must actually have an alpha channel, and it can’t have been already been filled with opaque pixels. A typical drawing surface in Java (the Graphics object passed to your paintComponent() method) has already been filled with an opaque background, so you won’t see any of your source drawing if you use dst over src. Alpha Compositing in
View Full Document
Unlocking...