Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

CS 354 Blending, Compositing, Anti-aliasing


Published on

CS 354 Computer Graphics

University of Texas, Austin

February 14, 2012

Published in: Technology, Art & Photos

CS 354 Blending, Compositing, Anti-aliasing

  1. 1. CS 354 Blending, Compositing, Anti-aliasing Mark Kilgard University of Texas February 14, 2012
  2. 2. Today’s material <ul><li>In-class quiz </li></ul><ul><li>Lecture topic: blending, compositing, anti-aliasing </li></ul><ul><ul><li>How are colors combined </li></ul></ul><ul><ul><li>How do we minimize color sampling artifacts </li></ul></ul><ul><li>Assignment </li></ul><ul><ul><li>Reading </li></ul></ul><ul><ul><ul><li>Chapter 7, pages 404-420 </li></ul></ul></ul><ul><ul><li>You should be working on Project #1 </li></ul></ul><ul><ul><ul><li>Due Tuesday, February 21 </li></ul></ul></ul>
  3. 3. Administrative <ul><li>Homework #2 solution available </li></ul><ul><ul><li> </li></ul></ul><ul><ul><li>Homework #2 grading </li></ul></ul><ul><ul><ul><li>Points possible: 39 (100%) </li></ul></ul></ul><ul><ul><ul><li>Average, excluding zeros: 33 (82%) </li></ul></ul></ul><ul><li>Quiz feedback continuing </li></ul><ul><ul><li>Look on piazza </li></ul></ul>
  4. 4. My Office Hours <ul><li>Tuesday, before class </li></ul><ul><ul><li>Painter (PAI) 5.35 </li></ul></ul><ul><ul><li>8:45 a.m. to 9:15 </li></ul></ul><ul><li>Thursday, after class </li></ul><ul><ul><li>ACE 6.302 </li></ul></ul><ul><ul><li>11:00 a.m. to 12:00 </li></ul></ul>
  5. 5. Last time, this time <ul><li>Last lecture, we discussed </li></ul><ul><ul><li>How do we look at objects </li></ul></ul><ul><ul><li>How do we represent objects for interactive rendering </li></ul></ul><ul><li>This lecture </li></ul><ul><ul><li>Object representation </li></ul></ul><ul><ul><li>Blending colors </li></ul></ul><ul><ul><li>Compositing images </li></ul></ul><ul><ul><li>Anti-aliasing images </li></ul></ul>
  6. 6. Daily Quiz <ul><li>Multiple choice: Which of these vectors is NOT an input vector parameter to the “look at” view transform: a) frustum vector a) eye vector b) at vector c) up vector </li></ul><ul><li>Multiple choice: The OpenGL convention (assuming only positive saling factors) for eye space has the eye looking down this axis direction: a) positive X b) negative X c) positive Y d) negative Y e) positive Z f) negative Z </li></ul><ul><li>Multiple choice: The 4x4 matrix generated by the “look at” transform is, in its general form , a: a) an identity matrix b) an affine matrix c) a projective matrix </li></ul><ul><li>On a sheet of paper </li></ul><ul><li>Write your EID, name, and date </li></ul><ul><li>Write #1, #2, #3, followed by its answer </li></ul>
  7. 7. Representing Objects <ul><li>Interested in object’s boundary (or manifold) </li></ul><ul><li>Various approaches </li></ul><ul><ul><li>Procedural representations </li></ul></ul><ul><ul><ul><li>Often fractal </li></ul></ul></ul><ul><ul><li>Explicit polygon (triangle) meshes </li></ul></ul><ul><ul><ul><li>By far, the most popular method </li></ul></ul></ul><ul><ul><li>Curved surface patches </li></ul></ul><ul><ul><ul><li>Often displacement mapped </li></ul></ul></ul><ul><ul><li>Implicit representation </li></ul></ul><ul><ul><ul><li>Blobby, volumetric </li></ul></ul></ul>Sierpinski gasket Utah Teapot Blobby modeling in RenderMan Quake 2 key frame triangle meshes Fractal tree [Philip Winston]
  8. 8. Focus on Triangle Meshes <ul><li>Easiest approach to representing object boundaries </li></ul><ul><li>So what is a mesh and how should it be stored? </li></ul><ul><ul><li>Simplest view </li></ul></ul><ul><ul><ul><li>A set of triangles, each with its “own” 3 vertices </li></ul></ul></ul><ul><ul><ul><ul><li>Essentially “triangle soup” </li></ul></ul></ul></ul><ul><ul><ul><li>Yet triangles in meshes share edges by design </li></ul></ul></ul><ul><ul><ul><ul><li>Sharing edges implies sharing vertices </li></ul></ul></ul></ul><ul><ul><li>More sophisticated view </li></ul></ul><ul><ul><ul><li>Store single set of unique vertexes in array </li></ul></ul></ul><ul><ul><ul><li>Then each primitive (triangle) specifies 3 indices into array of vertexes </li></ul></ul></ul><ul><ul><ul><li>More compact </li></ul></ul></ul><ul><ul><ul><ul><li>Vertex data size >> index size </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Avoids redundant vertex data </li></ul></ul></ul></ul><ul><ul><ul><li>Separates “topology” (how the mesh is connected) from its “geometry” (vertex positions and attributes) </li></ul></ul></ul><ul><ul><ul><ul><li>Connectivity can be deduced more easily </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Makes mesh processing algorithms easier </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Geometry data can change without altering the topology </li></ul></ul></ul></ul>
  9. 9. Consider a Tetrahedron <ul><li>Simplest closed volume </li></ul><ul><ul><li>Consists of 4 triangles and 4 vertices </li></ul></ul><ul><ul><ul><li>(and 4 edges) </li></ul></ul></ul>v0 v1 v3 v2 triangle list 0: v0,v1,v2 1: v1,v3,v2 2: v3,v0,v2 3: v1,v0,v3 (x0,y0,z1) (x1,y1,z1) (x2,y2,z2) (x3,y3,z3) vertex list 0: (x0,y0,z0) 1: (x1,y1,z1) 2: (x2,y2,z2) 3: (x3,y3,z3) topology geometry potentially on-GPU!
  10. 10. Drawing the Tetrahedron <ul><li>Expanded Immediate mode </li></ul><ul><li>glBegin (GL_TRIANGLES); { </li></ul><ul><li>glVertex3f (x0,y0,z0); </li></ul><ul><li>glVertex3 f(x1,y1,z1); </li></ul><ul><li>glVertex3f (x2,y2,z2); </li></ul><ul><li>glVertex3f (x1,y1,z1); </li></ul><ul><li>glVertex3f (x3,y3,z3); </li></ul><ul><li>glVertex3f (x2,y2,z2); </li></ul><ul><li>glVertex3f (x3,y3,z3); </li></ul><ul><li>glVertex3f (x0,y0,z0); </li></ul><ul><li>glVertex3f (x2,y2,z2); </li></ul><ul><li>glVertex3f (x1,y1,z1); </li></ul><ul><li>glVertex3f (x0,y0,z0); </li></ul><ul><li>glVertex3f (x3,y3,z3); </li></ul><ul><li>} glEnd (); </li></ul><ul><li>Indexed vertexes </li></ul><ul><li>glBegin ( GL_TRIANGLES ); { </li></ul><ul><li>for (int i=0; i<4; i++) { </li></ul><ul><li>glVertex3fv (vertex[triangle[i].v0]); </li></ul><ul><li>glVertex3fv (vertex[triangle[i].v1]); </li></ul><ul><li>glVertex3fv (vertex[triangle[i].v2]); </li></ul><ul><li>} </li></ul><ul><li>} glEnd (); </li></ul><ul><li>Client-memory Vertex arrays </li></ul><ul><li>GLuint ndxs[12] = { 0,1,2, 1,3,2, </li></ul><ul><li>3,0,2, 1,0,3 }; </li></ul><ul><li>glEnableClientState ( GL_VERTEX_ARRAY ); </li></ul><ul><li>glVertexPointer (3, GL_FLOAT , 3*sizeof( GLfloat ), xyz); </li></ul><ul><li>glDrawElements ( GL_TRIANGLES , 12, </li></ul><ul><li>GL_UNSIGNED_INT , ndxs); </li></ul>
  11. 11. Benefits of Vertex Array Approach <ul><li>Unique vertices are stored once </li></ul><ul><ul><li>Saves memory </li></ul></ul><ul><ul><ul><li>On CPU, on disk, and on GPU </li></ul></ul></ul><ul><li>Matches OpenGL vertex array model of operation </li></ul><ul><ul><li>And this matches the efficient GPU mode of operation </li></ul></ul><ul><ul><ul><li>The GPU can “cache” post-transformed vertex results by vertex index </li></ul></ul></ul><ul><ul><ul><ul><li>Saves retransformation and redundant vertex fetching </li></ul></ul></ul></ul><ul><ul><ul><li>Direct3D has the same model </li></ul></ul></ul><ul><ul><li>Allows vertex data to be stored on-GPU for even faster vertex processing </li></ul></ul><ul><ul><ul><li>OpenGL supported vertex buffer objects (VBOs) for this </li></ul></ul></ul>
  12. 12. More Information <ul><li>See “Modern OpenGL Usage: Using Vertex Buffer Objects Well” </li></ul><ul><ul><li> </li></ul></ul>
  13. 13. A Simplified Graphics Pipeline Application Vertex batching & assembly Triangle assembly Triangle clipping Triangle rasterization Fragment shading Depth testing Color update/blending Application- OpenGL API boundary Framebuffer NDC to window space Depth buffer Re-examine framebuffer color update…
  14. 14. A few more steps expanded Application Vertex batching & assembly Lighting View frustum clipping Triangle rasterization Fragment shading Depth testing Color update/blending Application- OpenGL API boundary Framebuffer NDC to window space Depth buffer Vertex transformation User defined clipping Back face culling Perspective divide Triangle assembly Texture coordinate generation
  15. 15. Blending <ul><li>Simple operation </li></ul><ul><ul><li>Two inputs </li></ul></ul><ul><ul><ul><li>Color value currently in framebuffer for pixel </li></ul></ul></ul><ul><ul><ul><li>Shaded color value of fragment rasterized at pixel </li></ul></ul></ul><ul><ul><li>One output </li></ul></ul><ul><ul><ul><li>A new “blended” color </li></ul></ul></ul>pixel color fragment color blend operation
  16. 16. Blending Enabled vs. Disabled pixel color fragment color blend operation pixel color fragment color glDisable ( GL_BLEND ) glEnable ( GL_BLEND )
  17. 17. RGBA: Red, Green, Blue, Alpha <ul><li>Four-component colors </li></ul><ul><ul><li>Red, green, blue </li></ul></ul><ul><ul><ul><li>Measures of color component intensity </li></ul></ul></ul><ul><ul><ul><li>From 0% to 100% </li></ul></ul></ul><ul><ul><ul><li>Often stored as 8-bit unsigned values </li></ul></ul></ul><ul><ul><li>Alpha—measure of opacity </li></ul></ul><ul><ul><ul><li>Also 0% (fully transparent) to 100% (fully opaque) </li></ul></ul></ul>
  18. 18. Meaning of Alpha <ul><li>Translucency = 100% – Opacity </li></ul><ul><li>Fully opaque surfaces permit no light to pass through surface </li></ul><ul><li>Translucent surfaces permit some light to pass through surface </li></ul><ul><li>Best though of in probabilistic terms </li></ul><ul><ul><li>Implies uncertainty about geometry of occlusion at the sub-pixel level </li></ul></ul>
  19. 19. Why blending? compositing window systems volumetric effects; explosions medical imaging compositing complex art work
  20. 20. Conventional Blend Operation source color destination factor destination color source factor × × + clamp [0,1] pixel color fragment color
  21. 21. Conventional Blend Operation source color destination factor destination color source factor × × + clamp [0,1] pixel color fragment color × × × + + + × × × clamp [0,1] clamp [0,1] clamp [0,1] modulate, add, and clamp operations are vector on RGBA components
  22. 22. Conventional Blend Operation source color destination factor destination color source factor × × + clamp [0,1] pixel color fragment color glBlendFunc ( srcFunc , dstFunc )
  23. 23. Blend Function Parameters where s = min(A s ,1-A d ) (s,s,s,s) GL_SRC_ALPHA_SATURATE (1-A c ,1-A c ,1-A c ,1-A c ) GL_ONE_MINUS_CONSTANT_ALPHA (A c ,A c ,A c ,A c ) GL_CONSTANT_ALPHA (1-R c ,1-G c ,1-B c ,1-A c ) GL_ONE_MINUS_CONSTANT_COLOR (R c ,G c ,B c ,A c ) GL_CONSTANT_COLOR (1-A d ,1-A d ,1-A d ,1-A d ) GL_ONE_MINUS_DST_ALPHA (A d ,A d ,A d ,A d ) GL_DST_ALPHA (1-A s ,1-A s ,1-A s ,1-A s ) GL_ONE_MINUS_SRC_ALPHA (A s ,A s ,A s ,A s ) GL_SRC_ALPHA (1-R d ,1-G d ,1-B d ,1-A d ) GL_ONE_MINUS_DST_COLOR (R d ,G d ,B d ,A d ) GL_DST_COLOR (1-R s ,1-G s ,1-B s ,1-A s ) GL_ONE_MINUS_SRC_COLOR (R s ,G s ,B s ,A s ) GL_SRC_COLOR (1,1,1,1) GL_ONE (0,0,0,0) GL_ZERO ( f r , f g , f b , f a ) Parameter
  24. 24. glBlendFunc Example: Over <ul><li>glBlendFunc ( GL_ONE , GL_ONE_MINUS_SRC_ALPHA ); </li></ul><ul><li>Meaning </li></ul><ul><ul><li>srcColor + (1 – srcAlpha)×dstColor </li></ul></ul><ul><ul><li>So called “over” operation </li></ul></ul><ul><ul><ul><li>Source color blended “over” destination color </li></ul></ul></ul><ul><ul><ul><li>Render layers bottommost-to-topmost </li></ul></ul></ul>1 2 3
  25. 25. glBlendFunc Example: Under <ul><li>glBlendFunc ( GL_ONE_MINUS_DST_ALPHA , GL_ONE ); </li></ul><ul><li>Meaning </li></ul><ul><ul><li>(1 –dstAlpha)×srcColor + dstColor </li></ul></ul><ul><ul><li>So called “under” operation </li></ul></ul><ul><ul><ul><li>Source color blended “under” destination color </li></ul></ul></ul><ul><ul><ul><li>Render layers topmost-to-bottommost </li></ul></ul></ul>3 2 1
  26. 26. Pre-multiplied Alpha <ul><li>Opacity should be multiplied in color components </li></ul><ul><ul><li>Essentially (R× α ,G× α ,B× α , α ) </li></ul></ul><ul><li>Utility of pre-multiplied alpha isn’t obvious </li></ul><ul><ul><li>Non-pre-multiplied alpha says the RGB components don’t include opacity </li></ul></ul><ul><ul><ul><li>Essentially (R,G,B, α ) </li></ul></ul></ul><ul><ul><ul><ul><li>Sometimes called “straight” color </li></ul></ul></ul></ul><ul><ul><ul><li>But wrong because such “straight” colors don’t combine properly mathematically </li></ul></ul></ul>
  27. 27. Hardware View of Blending <ul><li>Each blend operation means </li></ul><ul><ul><li>Read-Modify-Write (RMW) operation </li></ul></ul><ul><ul><li>More expensive than just a read or write </li></ul></ul><ul><ul><ul><li>Implies memory bus must be “turned around” </li></ul></ul></ul><ul><li>GPUs perform blending in special Raster Operation (ROP) units </li></ul><ul><ul><li>Good example of fixed-function graphics hardware </li></ul></ul><ul><li>Strategies for performance </li></ul><ul><ul><li>Group RMW operations for multiple pixels </li></ul></ul><ul><ul><li>Organize framebuffer for 2D memory locality </li></ul></ul><ul><ul><li>Data-dependent discards and RMW-to-W conversions </li></ul></ul><ul><ul><li>Color compression </li></ul></ul>
  28. 28. Why not do Blending in the Fragment Shader? <ul><li>Blending is fairly simple math </li></ul><ul><li>Programmable fragment shading is much more general </li></ul><ul><ul><li>So why not do the blending operations in the shader? </li></ul></ul><ul><li>Good reason </li></ul><ul><ul><li>The Read-Modify-Write of a blend operation requires an “interlock” </li></ul></ul><ul><ul><ul><li>Pixels must be blended in primitive order </li></ul></ul></ul><ul><ul><ul><li>If shader does blend, means shader can only be processing one fragment for any given pixel at a time </li></ul></ul></ul><ul><ul><ul><ul><li>If shader can “see” the pixel color of a fragment, all the prior fragments bound for the pixel must be completed in order to start shading the pixel again </li></ul></ul></ul></ul><ul><ul><li>This “interlock” would limit shading performance </li></ul></ul>
  29. 29. Sophisticated Blending <ul><li>Since OpenGL 1.0, blending functionality has been embellished </li></ul><ul><li>Embellishments </li></ul><ul><ul><li>Constant blend color </li></ul></ul><ul><ul><ul><li>glBlendColor </li></ul></ul></ul><ul><ul><li>Blend equation </li></ul></ul><ul><ul><ul><li>glBlendEquation—min , max, subtract, reverse subtract </li></ul></ul></ul><ul><ul><li>Separate RGB and alpha blend functions and equations </li></ul></ul><ul><ul><ul><li>glBlendEquationSeparate , glBlendFuncSeparate </li></ul></ul></ul><ul><ul><li>Distinct blending controls for multiple color buffers </li></ul></ul><ul><ul><ul><li>Also known as render targets in Direct3D </li></ul></ul></ul><ul><ul><li>Multi-sampling for anti-aliasing </li></ul></ul><ul><ul><ul><li>Implies per-color sample blending </li></ul></ul></ul><ul><ul><li>Floating-point (single- and half-precision) blending </li></ul></ul>
  30. 30. Newer Blend Commands <ul><li>glBlendColor ( red , green , blue , alpha ) </li></ul><ul><ul><li>Accessed by the GL_CONSTANT_COLOR , etc. blend functions </li></ul></ul><ul><li>glBlendEquation ( func ) </li></ul><ul><ul><li>func is on of GL_FUNC_ADD , GL_MIN , GL_MAX , GL_FUNC_SUBTRACT , GL_FUNC_REVERSE_SUBTRACT </li></ul></ul><ul><li>glBlendFuncSeparate </li></ul><ul><ul><li>Example of “over” for straight RGBA values: glBlendFuncSeparate ( GL_SRC_ALPHA , GL_ONE_MINUS_SRC_ALPHA , GL_ONE , GL_SRC_ALPHA ) </li></ul></ul><ul><ul><li>Allows straight RGBA to composite correctly </li></ul></ul><ul><li>glBlendEquationSeparate </li></ul><ul><ul><li>Different blend equation for RGB versus alpha </li></ul></ul>
  31. 31. Blend Color for Factors source color destination factor destination color source factor × × + clamp [0,1] pixel color fragment color glBlendColor (r,g,b,a) blend color
  32. 32. Min/Max Blend Operation source color destination color min or max clamp [0,1] pixel color fragment color glBlendEquation ( GL_MIN ) glBlendEquation ( GL_MAX )
  33. 33. Consider Example <ul><li>Consider straight colors </li></ul><ul><ul><li>50% of (1,0,0,1) and </li></ul></ul><ul><ul><ul><li>50% of 100% red </li></ul></ul></ul><ul><ul><li>50% of (0,0,1,0.2) </li></ul></ul><ul><ul><ul><li>50% of 20% blue </li></ul></ul></ul><ul><li>Result of weighted average of components </li></ul><ul><ul><li>(0.5,0,0.5,0.6) </li></ul></ul><ul><ul><ul><li>60%-opaque magenta ? </li></ul></ul></ul><ul><ul><ul><li>Non-sensible when much less blue than red </li></ul></ul></ul><ul><li>Proper result </li></ul><ul><ul><li>Pre-multiplied colors are (1,0,0,1) and (0,0,0.2,0.2) </li></ul></ul><ul><ul><li>Now weighted average components: </li></ul></ul><ul><ul><ul><li>(0.5,0.1,0.6) or 60%-opaque maroon red ? </li></ul></ul></ul><ul><ul><ul><li>Sensible that result is mostly red </li></ul></ul></ul>
  34. 34. “ Over” Blending Not Commutative <ul><li>Order of blending matters! </li></ul><ul><li>blend(blend(A,B), C) ≠ blend(blend(C,A), B) </li></ul><ul><ul><li>Also blend(A,B) ≠ blend(B,A) </li></ul></ul><ul><li>Blending is not commutative </li></ul><ul><ul><li>Can’t re-arrange blend operations </li></ul></ul><ul><ul><li>(Similar to matrix composition) </li></ul></ul><ul><li>Pre-multiplied alpha blending for over and under is associative </li></ul><ul><ul><li>blend(blend(A,B), C) = blend(A, blend(B,C)) </li></ul></ul><ul><li>Reverse of over blending is under </li></ul><ul><ul><li>So back-to-front = front-to-back </li></ul></ul><ul><ul><li>But requires framebuffer maintain a destination alpha channel </li></ul></ul>
  35. 35. Getting Blending Right <ul><li>Blending operations must be properly ordered </li></ul><ul><li>How to do this? </li></ul><ul><ul><li>Sort your objects </li></ul></ul><ul><ul><li>Sort you triangles </li></ul></ul><ul><ul><ul><li>Neither of above is always possible </li></ul></ul></ul><ul><ul><li>Sort your fragments </li></ul></ul><ul><ul><ul><li>Depth peeling </li></ul></ul></ul><ul><ul><ul><li>A-buffer schemes </li></ul></ul></ul>
  36. 36. Properly Ordered Compositing vs. Incorrectly Ordered
  37. 37. Properly Ordered Compositing vs. Incorrectly Ordered
  38. 38. Compositing <ul><li>Blending operates on pixels </li></ul><ul><li>Compositing operates on images </li></ul><ul><ul><li>Composite image A & image B </li></ul></ul>
  39. 39. Intra-pixel Regions for Compositing <ul><ul><li>A ∩ B </li></ul></ul>A ∩ ~B ~A ∩ B ~A ∩ ~B Source: SVG Compositing Specification
  40. 40. Compositing Digital Images <ul><li>Classic 1984 SIGGRAPH paper introduces compositing operators </li></ul><ul><ul><li>Porter and Duff </li></ul></ul><ul><li>Porter-Duff Composite Operators </li></ul><ul><ul><li>Rca = f(Ac,Bc)×Aa×Ba + Y×Ac×Aa×(1-Ba) + Z×Bc×(1-Aa)×Ba </li></ul></ul><ul><ul><li>Ra = X×Aa×Ba + Y×Aa×(1-Ba) + Z×(1-Aa)×Ba </li></ul></ul>
  41. 41. Porter-Duff Composite Operators
  42. 42. Porter & Duff Modes Porter & Duff blend modes 1 1 0 0 1 1 0 1 1 0 1 0 Y 0 0 0 Clear 1 0 0 Xor 0 1 Bc Dst-atop 1 1 Ac Src-atop 1 0 0 Dst-out 0 0 0 Src-out 0 0 Bc Dst-In 0 1 Ac Src-In 1 1 Bc Dst-Over 1 1 Ac Src-Over 1 1 Bc Dst 0 1 Ac Src Z X f(Ac,Bc) Operation
  43. 43. Porter & Duff Modes Expanded Uncorrelated blend mode expansion of Porter & Duff blend modes 1 0 1 1 0 0 0 1 1 1 0 0 Z 1 1 0 0 1 1 0 1 1 0 1 0 Y 0 0 0 Clear Aca×(1-Ba)+(1-Aa)×Bca 0 0 Xor (1-Ba)×Aca+Aa×Bca 1 Bc Dst-atop Aca×Ba+(1-Aa)×Bca 1 Ac Src-atop (1-Aa)×Bca 0 0 Dst-out (1-Ba)×Aca 0 0 Src-out Bca×Aa 0 Bc Dst-In Aca×Ba 1 Ac Src-In Bca+(1-Ba)×Aca 1 Bc Dst-Over Aca+(1-Aa)×Bca 1 Ac Src-Over Bca 1 Bc Dst Aca 1 Ac Src Blend mode X f(Ac,Bc) Operation
  44. 44. Porter & Duff for glBlendFunc GL_ONE_MINS_DST_ALPHA GL_ONE_MINUS_DST_ALPHA GL_DST_ALPHA GL_ZERO GL_ONE_MINUS_DST_ALPHA GL_ZERO GL_DST_ALPHA GL_ONE_MINUS_DST_ALPHA GL_ONE GL_ZERO GL_ONE GL_ZERO srcFactor Aca×(1-Ba)+(1-Aa)×Bca (1-Ba)×Aca+Aa×Bca Aca×Ba+(1-Aa)×Bca (1-Aa)×Bca (1-Ba)×Aca Bca×Aa Aca×Ba Bca+(1-Ba)×Aca Aca+(1-Aa)×Bca Bca Aca 0 Blend mode GL_ONE_MINUS_SRC_ALPHA GL_DST_ALPHA GL_ONE_MINUS_SRC_ALPHA GL_ONE_MINUS_SRC_ALPHA GL_ZERO GL_SRC_ALPHA GL_ZERO GL_ONE GL_ONE_MINUS_SRC_ALPHA GL_ONE GL_ZERO GL_ZERO dstFactor Clear Xor Dst-atop Src-atop Dst-out Src-out Dst-In Src-In Dst-Over Src-Over Dst Src Operation
  45. 45. Hardware Blending supports all Porter-Duff Blend Modes <ul><li>Using prior slide’s table </li></ul><ul><ul><li>Your OpenGL (or Direct3D) program can implement any of Porter-Duff blend modes </li></ul></ul><ul><li>Examples </li></ul><ul><ul><li>Src-Over </li></ul></ul><ul><ul><ul><li>glBlendFunc(GL_ONE, GL_ONE_MINUS_SRC_ALPHA) </li></ul></ul></ul><ul><ul><li>Dst-In </li></ul></ul><ul><ul><ul><li>glBlendFuc(GL_ZERO, GL_SRC_ALPHA) </li></ul></ul></ul><ul><ul><li>Dst-Atop </li></ul></ul><ul><ul><ul><li>glBlendFunc(GL_ONE_MINUS_DST_ALPHA, GL_DST_ALPHA) </li></ul></ul></ul><ul><li>Conclusion : GPU hardware “blend functions” can configure all the sound Porter-Duff compositing algebra blend modes </li></ul><ul><ul><li>Compositing algebra theory “maps” well to GPU functionality </li></ul></ul><ul><ul><li>Assumption : using pre-multiplied alpha colors </li></ul></ul>
  46. 46. Additional Blend Modes <ul><li>Additional blend modes </li></ul><ul><ul><li>Since Porter-Duff’s composite operators, Adobe introduced further artistic blend modes </li></ul></ul><ul><ul><li>Part of PhotoShop, Illustrator, PDF, Flash, and other standards </li></ul></ul><ul><ul><li>Part of the vocabulary of digital artists now </li></ul></ul><ul><li>Examples </li></ul><ul><ul><li>ColorDodge, HardLight, Darken, etc. </li></ul></ul><ul><li>Define with alternate f(Ac,Bc) function </li></ul>
  47. 47. Aliased Jagged artifacts
  48. 48. Multi-sample 8x Smoother appearance
  49. 49. Multi-sample Coverage Positions 4x jittered 1x (aliased) 8x jittered 4x orthogonal
  50. 50. Next Lecture <ul><li>Color representation </li></ul><ul><ul><li>What ways can quantitatively represent color? </li></ul></ul><ul><ul><li>As usual, expect a short quiz on today’s lecture </li></ul></ul><ul><li>Assignments </li></ul><ul><ul><li>Reading </li></ul></ul><ul><ul><ul><li>Chapter 7, pages 404-420 </li></ul></ul></ul><ul><ul><li>Work on Project #1 </li></ul></ul><ul><ul><ul><li>Building a 3D object model loader </li></ul></ul></ul><ul><ul><ul><li>Due Tuesday, February 21 </li></ul></ul></ul>