cs324e - elements of graphics and visualization compositing
TRANSCRIPT
![Page 1: CS324e - Elements of Graphics and Visualization Compositing](https://reader036.vdocument.in/reader036/viewer/2022062423/56649e725503460f94b717d3/html5/thumbnails/1.jpg)
CS324e - Elements of Graphics and Visualization
Compositing
![Page 2: CS324e - Elements of Graphics and Visualization Compositing](https://reader036.vdocument.in/reader036/viewer/2022062423/56649e725503460f94b717d3/html5/thumbnails/2.jpg)
2
Compositing• How to store or combine colors in a
drawable primitive (Shape, String, Image) with the colors already present in the destination
• aka Blending• used extensively to combine CGI effects and
live footage• Java 2D:– Composite interface– setComposite method on Graphics2D object
![Page 3: CS324e - Elements of Graphics and Visualization Compositing](https://reader036.vdocument.in/reader036/viewer/2022062423/56649e725503460f94b717d3/html5/thumbnails/3.jpg)
3
Alpha Compositing• Composite class implemented by one class
in Java: AlphaComposite• rules affect the alpha value (transparency)• rules are mathematical and determine
color and alpha for source (thing being drawn) and the destination (the graphics area and the things that have already been drawn)
![Page 4: CS324e - Elements of Graphics and Visualization Compositing](https://reader036.vdocument.in/reader036/viewer/2022062423/56649e725503460f94b717d3/html5/thumbnails/4.jpg)
4
Porter Duff Rules• 12 rules in AlphaComposite• Paper by Thomas Porter and Tom Duff• Clear, Dst, dstAtop, DstIn, DstOut,
DstOver, Src, SrcAtop, ScrIn, SrcOut, SrcOver, Xor
http://graphics.pixar.com/library/Compositing/paper.pdf
![Page 5: CS324e - Elements of Graphics and Visualization Compositing](https://reader036.vdocument.in/reader036/viewer/2022062423/56649e725503460f94b717d3/html5/thumbnails/5.jpg)
5
Math Behind One Example• Source Over, SrcOver• "Composite the source over the
destination as if the source were a translucent painting on a piece of glass held over the destination."–mixing of colors
![Page 6: CS324e - Elements of Graphics and Visualization Compositing](https://reader036.vdocument.in/reader036/viewer/2022062423/56649e725503460f94b717d3/html5/thumbnails/6.jpg)
6
Source Over
• Ar = As + Ad * (1 - As)
• Cr = Cs + Cd * (1 - As)• A is the alpha channel (value) of the pixel • C is the color component of the pixel• r = result• s = source• d = destination
![Page 7: CS324e - Elements of Graphics and Visualization Compositing](https://reader036.vdocument.in/reader036/viewer/2022062423/56649e725503460f94b717d3/html5/thumbnails/7.jpg)
7
Src Over Result• red oval is source– alpha set to 50%
• blue rectangle is destination drawn onto a transparent image (any non blue pixels are transparent)
![Page 8: CS324e - Elements of Graphics and Visualization Compositing](https://reader036.vdocument.in/reader036/viewer/2022062423/56649e725503460f94b717d3/html5/thumbnails/8.jpg)
8
Example 2- DstOut• "The part of the destination lying outside of
the source replaces the destination. Opposite of DstIn, but with an alpha value of 50 percent, both operations look the same"
• Ar = Ad * (1 - As)
• Cr = Cd * (1 - As)• notice, no red• only effect from
alpha of source
![Page 9: CS324e - Elements of Graphics and Visualization Compositing](https://reader036.vdocument.in/reader036/viewer/2022062423/56649e725503460f94b717d3/html5/thumbnails/9.jpg)
9
Example Program• red oval is source• blue rectangle is destination drawn onto
a transparent image (any non blue pixels are transparent)
• Java adds parameter to Porter-Duff rules, alpha value of source prior to blending with destination– In examples alpha values 50% opacity
![Page 10: CS324e - Elements of Graphics and Visualization Compositing](https://reader036.vdocument.in/reader036/viewer/2022062423/56649e725503460f94b717d3/html5/thumbnails/10.jpg)
10
Clear• Color and alpha of destination cleared
![Page 11: CS324e - Elements of Graphics and Visualization Compositing](https://reader036.vdocument.in/reader036/viewer/2022062423/56649e725503460f94b717d3/html5/thumbnails/11.jpg)
11
Dst• Destination untouched (not so useful)
![Page 12: CS324e - Elements of Graphics and Visualization Compositing](https://reader036.vdocument.in/reader036/viewer/2022062423/56649e725503460f94b717d3/html5/thumbnails/12.jpg)
12
DstAtop• Part of destination inside of source is
composited with source and replaces destination.
• Destination appears to be drawn on top of source.
![Page 13: CS324e - Elements of Graphics and Visualization Compositing](https://reader036.vdocument.in/reader036/viewer/2022062423/56649e725503460f94b717d3/html5/thumbnails/13.jpg)
13
DstIn• The part of the destination inside the
source replaces the destination
![Page 14: CS324e - Elements of Graphics and Visualization Compositing](https://reader036.vdocument.in/reader036/viewer/2022062423/56649e725503460f94b717d3/html5/thumbnails/14.jpg)
14
DstOut• The part of the destination outside the
source replaces the destination
![Page 15: CS324e - Elements of Graphics and Visualization Compositing](https://reader036.vdocument.in/reader036/viewer/2022062423/56649e725503460f94b717d3/html5/thumbnails/15.jpg)
15
DstOver• The destination is composited with the
source and the result replaces the destination.
![Page 16: CS324e - Elements of Graphics and Visualization Compositing](https://reader036.vdocument.in/reader036/viewer/2022062423/56649e725503460f94b717d3/html5/thumbnails/16.jpg)
16
Src• Source copied into destination. (no
blending due to alpha)
![Page 17: CS324e - Elements of Graphics and Visualization Compositing](https://reader036.vdocument.in/reader036/viewer/2022062423/56649e725503460f94b717d3/html5/thumbnails/17.jpg)
17
SrcAtop• Source inside the destination is
composed with the destination. Source outside destination discarded.
![Page 18: CS324e - Elements of Graphics and Visualization Compositing](https://reader036.vdocument.in/reader036/viewer/2022062423/56649e725503460f94b717d3/html5/thumbnails/18.jpg)
18
SrcIn• Source inside destination replaces
destination. Source outside destination discarded.
![Page 19: CS324e - Elements of Graphics and Visualization Compositing](https://reader036.vdocument.in/reader036/viewer/2022062423/56649e725503460f94b717d3/html5/thumbnails/19.jpg)
19
SrcOut• Source outside destination replaces
destination. Part of source inside is discarded
![Page 20: CS324e - Elements of Graphics and Visualization Compositing](https://reader036.vdocument.in/reader036/viewer/2022062423/56649e725503460f94b717d3/html5/thumbnails/20.jpg)
20
SrcOver• Source is composed / blended with
destination. (Standard behaviors of graphics object)
![Page 21: CS324e - Elements of Graphics and Visualization Compositing](https://reader036.vdocument.in/reader036/viewer/2022062423/56649e725503460f94b717d3/html5/thumbnails/21.jpg)
21
Xor• Source outside destination combined
with part of destination that is outside source.– similar to CAG
![Page 22: CS324e - Elements of Graphics and Visualization Compositing](https://reader036.vdocument.in/reader036/viewer/2022062423/56649e725503460f94b717d3/html5/thumbnails/22.jpg)
22
Effects with AlphaComposites• Four most useful rules:–Clear, Src, SrcOver, SrcIn
• Clear:–erase an arbitrary shape.
![Page 23: CS324e - Elements of Graphics and Visualization Compositing](https://reader036.vdocument.in/reader036/viewer/2022062423/56649e725503460f94b717d3/html5/thumbnails/23.jpg)
23
Programmer Defined Composites• Examples from Filthy Rich Clients• Recall, two images, a source and a
destination• Composites similar to image filtering–Recall BufferedImageOp
• FRC textbook: BlendComposites• Implements the Composite interface• Lots of support code
![Page 24: CS324e - Elements of Graphics and Visualization Compositing](https://reader036.vdocument.in/reader036/viewer/2022062423/56649e725503460f94b717d3/html5/thumbnails/24.jpg)
24
BlendComposites• Lots of support code, but different
Composites from different rules (blending) for combining source and destination image
• Example images
src
dest
![Page 25: CS324e - Elements of Graphics and Visualization Compositing](https://reader036.vdocument.in/reader036/viewer/2022062423/56649e725503460f94b717d3/html5/thumbnails/25.jpg)
25
BlendComposites - ADD
Array values are RGBA
![Page 26: CS324e - Elements of Graphics and Visualization Compositing](https://reader036.vdocument.in/reader036/viewer/2022062423/56649e725503460f94b717d3/html5/thumbnails/26.jpg)
26
BlendComposites - GLOW
![Page 27: CS324e - Elements of Graphics and Visualization Compositing](https://reader036.vdocument.in/reader036/viewer/2022062423/56649e725503460f94b717d3/html5/thumbnails/27.jpg)
27
Putting AlphaComposites and Gradients to Use
• Create a reflection of an image using gradients and alpha composite
• Draw an image• Draw the same image below it, reflected• Create a paint that varies alpha from half
to 0• Use Alpha Composite to combine alpha
paint and upside down image
![Page 28: CS324e - Elements of Graphics and Visualization Compositing](https://reader036.vdocument.in/reader036/viewer/2022062423/56649e725503460f94b717d3/html5/thumbnails/28.jpg)
28
Image
![Page 29: CS324e - Elements of Graphics and Visualization Compositing](https://reader036.vdocument.in/reader036/viewer/2022062423/56649e725503460f94b717d3/html5/thumbnails/29.jpg)
29
Reflection
![Page 30: CS324e - Elements of Graphics and Visualization Compositing](https://reader036.vdocument.in/reader036/viewer/2022062423/56649e725503460f94b717d3/html5/thumbnails/30.jpg)
30
Gradient (alpha mask)
![Page 31: CS324e - Elements of Graphics and Visualization Compositing](https://reader036.vdocument.in/reader036/viewer/2022062423/56649e725503460f94b717d3/html5/thumbnails/31.jpg)
31
Final result usingAlphaComposite
DstIn