Compositing and Blending - Chapter 8 modified by Ray Wisman Ed Angel Professor of Computer Science, Electrical and Computer Engineering, and Media Arts University of New Mexico

2 Angel: Interactive Computer Graphics 4E © Addison-Wesley 2005 Objectives Learn to use the A component in RGBA color for ­Blending for translucent surfaces ­Compositing images ­Antialiasing

3 Opacity and Transparency Opaque surfaces permit no light to pass through Transparent surfaces permit all light to pass Translucent surfaces pass some light translucency = 1 – opacity (  ) opaque surface  =1 translucent surface  =.3

4 Angel: Interactive Computer Graphics 4E © Addison-Wesley 2005 Physical Models Dealing with translucency in a physically correct manner is difficult due to ­the complexity of the internal interactions of light and matter ­Using a pipeline renderer

5 Angel: Interactive Computer Graphics 4E © Addison-Wesley 2005 Writing Model Use A component of RGBA (or RGB  ) color to store opacity During rendering we can expand our writing model to use RGBA values Color Buffer destination component blend destination blending factor source blending factor source component

6 Angel: Interactive Computer Graphics 4E © Addison-Wesley 2005 Blending Equation Suppose that the source and destination pixel colors are s = [s r, s g, s b, s  ] d = [d r, d g, d b, d  ] We can define source and destination blending factors for each RGBA component b = [b r, b g, b b, b  ] c = [c r, c g, c b, c  ] Blend to destination pixel as d’ = [b r s r + c r d r, b g s g + c g d g, b b s b + c b d b, b  s  + c  d  ] Values > 1 are clamped to 1, values < 0 are clamped to 0. Can choose  and method of combining source and destination

7 Angel: Interactive Computer Graphics 4E © Addison-Wesley 2005 OpenGL Blending and Compositing Must enable blending and pick source and destination factors glEnable(GL_BLEND) glBlendFunc(src_factor, dst_factor) Only certain factors supported ­GL_ZERO source color (0,0,0,0) ­GL_ONE use current src color ­GL_SRC_ALPHA multiply src by src  value ­GL_ONE_MINUS_SRC_ALPHA multiply src by (1-src  ) value ­GL_DST_ALPHA multiply dst by dst  value ­GL_ONE_MINUS_DST_ALPHA multiply dst by (1-dst  ) value Example ­glBlend(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);

8 Angel: Interactive Computer Graphics 4E © Addison-Wesley 2005 Example Suppose that we start with the opaque background color (R 0,G 0,B 0,1) ­This color becomes the initial destination color We now want to blend in a translucent polygon with color (R 1,G 1,B 1,  1 ) Select GL_SRC_ALPHA and GL_ONE_MINUS_SRC_ALPHA as the source and destination blending factors R ’ 1 =  1 R 1 +(1-  1 ) R 0, …… Note this formula is correct if polygon is either opaque or transparent

9 Example Download Download Start with opaque background color (R 0,G 0,B 0,1) ­glClearColor(1,1,1, 1); white background ­Background initial destination color, defined first in buffer ­glColor4f(1, 0, 0, 1); red sphere destination Blend in a translucent polygon with color (R 1,G 1,B 1,  1 ) glDepthMask(GL_FALSE); read-only, show all objects glEnable(GL_BLEND); glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA ); glColor4f(0, 0, 1,.3 ); blue sphere source Select GL_SRC_ALPHA and GL_ONE_MINUS_SRC_ALPHA as the source and destination blending factors R ’ 1 =  1 R 1 +(1-  1 ) R 0, …… Click

10 Example Start with opaque background color (R 0,G 0,B 0,1) ­glClearColor(1,1,1, 1); white background ­glColor4f(1, 0, 0, 1); red sphere destination ­glBlendFunc(GL_SRC_ALPHA, source, destination GL_ONE_MINUS_SRC_ALPHA ); ­glColor4f(0, 0, 1,.3 ); blue sphere source R d = 1, G d = 0, B d = 0 R d =  s R s +(1-  s ) R d =.3*0+(1-.3)*1 =.7 G d =  s G s +(1-  s ) G d =.3*0+(1-.3)*0 = 0 B d =  s B s +(1-  s ) B d =.3*1+(1-.3)*0 =.3 Blue in front of red sphere appears (.7,0,.3) Note that blended with white background Click

11 Angel: Interactive Computer Graphics 4E © Addison-Wesley 2005 Clamping and Accuracy All the components (RGBA) are clamped and stay in the range (0,1) However, in a typical system, RGBA values are only stored to 8 bits ­Can easily loose accuracy if we add many components together ­Example: add together n images Divide all color components by n to avoid clamping Blend with source factor = 1, destination factor = 1 But division by n loses bits

12 Angel: Interactive Computer Graphics 4E © Addison-Wesley 2005 Order Dependency Is this image correct? ­Probably not ­Polygons are rendered in the order they pass down the pipeline ­Blending functions are order dependent

13 Angel: Interactive Computer Graphics 4E © Addison-Wesley 2005 Opaque and Translucent Polygons Polygons some opaque and some translucent What about hidden-surface removal? Enable hidden surface removal. Opaque polygons block all polygons behind them and affect the depth buffer - glDepthMask(GL_TRUE) But translucent polygons should not affect depth buffer ­Render with glDepthMask(GL_FALSE) which makes depth buffer read-only Sort translucent polygons first to remove order dependency Render in front-to-back order with z-buffer read-only

14 Fog We can composite with a fixed color and have the blending factors depend on depth ­Simulates a fog effect Blend source color C s and fog color C f by C s ’ =f C s + (1-f) C f f is the fog factor ­Exponential ­Gaussian ­Linear (depth cueing)

15 Fog Functions

16 Angel: Interactive Computer Graphics 4E © Addison-Wesley 2005 OpenGL Fog Functions GLfloat fcolor[4] = {1,1,1,1}: glEnable(GL_FOG); glFogf(GL_FOG_MODE, GL_EXP); glFogf(GL_FOG_DENSITY, 0.1); glFogv(GL_FOG, fcolor); White fog. Click

17 Angel: Interactive Computer Graphics 4E © Addison-Wesley 2005 Line Aliasing Ideal raster line is one pixel wide All line segments, other than vertical and horizontal segments, partially cover pixels Simple algorithms color only whole pixels Lead to the “jaggies” or aliasing Similar issue for polygons

18 Angel: Interactive Computer Graphics 4E © Addison-Wesley 2005 Antialiasing Can try to color a pixel by adding a fraction of its color to the frame buffer ­Fraction depends on percentage of pixel covered by fragment ­Fraction depends on whether there is overlap no overlapoverlap

19 Antialiasing Frame buffer is destination d, C n color of pixel for polygon n Opaque background C 0, frame buffer starts with C 0 and  0 =0 Render polygon 1 by: ­C d =(1-  1 )C 0 +  1 C 1 ­  d =  1 If no overlap, polygon 2 rendered by: ­C d =(1-  2 )((1-  1 )C 0 +  1 C 1 )+  2 C 2 ­  d =  1 +  2 Resulting  d is fraction of pixel covered Blending, no clamping Resulting color affected by order rendered no overlap

20 Antialiasing Average Method Opaque background C 0, frame buffer starts with C 0 and  0 =0 Render polygon 1 by: ­C d =(1-  1 )C 0 +  1 C 1 ­  d =  1 If no overlap, polygon 2 rendered by: ­C d =(1-  2 )((1-  1 )C 0 +  1 C 1 )+  2 C 2 ­  d =  1 +  2

21 Angel: Interactive Computer Graphics 4E © Addison-Wesley 2005 Area Averaging Without knowing location of fragments in pixel But fraction of fragment 1=  1 and fragment 2=  2 Use average area  d =  1 +  2 -  1  2 as blending factor Assigning color can depend on depth or other assumptions. Overlap of pixel

22 OpenGL Antialiasing Can enable separately for points, lines, or polygons glEnable(GL_POINT_SMOOTH); glEnable(GL_LINE_SMOOTH); glEnable(GL_POLYGON_SMOOTH); glEnable(GL_BLEND); glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA); Not aliased Point aliased Line aliased Point, line aliased or blend and blend

23 Angel: Interactive Computer Graphics 4E © Addison-Wesley 2005 Accumulation Buffer Compositing and blending are limited by resolution of the frame buffer ­Typically 8 bits per RGB color component ­Adding RGB of several fragments overflow ­Scaling reduces accuracy to a few bits ­Clamping turns colors to white The accumulation buffer is a high resolution buffer (16 or more bits per component) that avoids this problem Write into it or read from it with a scale factor Slower than direct compositing into the frame buffer

24 Angel: Interactive Computer Graphics 4E © Addison-Wesley 2004 OpenGL Frame Buffer

25 Angel: Interactive Computer Graphics 4E © Addison-Wesley 2005 Applications Compositing Image Filtering (convolution) Whole scene antialiasing Motion effects (e.g. blurring by accumulating and shifting image) Click

26 Blurring Example Download Download glClear(GL_ACCUM_BUFFER_BIT); for (i = 0; i < 6; i ++) {// Draw objects 6 times glClearColor(1,1,1,1); glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT ); glPushMatrix(); glTranslatef(0.0, 0.0, -20.0); glRotatef(Rotation * i, 0.0, 1.0, 0.0);// Shift images ith time glPushMatrix(); glTranslatef(-1.0, 0.0, 0.0); glutSolidSphere(1.0, 36, 18); glPopMatrix();

27 glPushMatrix(); glTranslatef(1.0, 0.0, 0.0); glRotatef(15.0, 0.0, 1.0, 0.0); glRotatef(15.0, 0.0, 0.0, 1.0); glutSolidCube(2.0); glPopMatrix(); if (i == 0) // Accumulate the frame buffer glAccum(GL_LOAD, 0.5);// Initial image more weight else glAccum(GL_ACCUM, 0.1);// Blurred get less weight } /* Copy the accumulated results back to the color buffer... */ glAccum(GL_RETURN, 1.0); glutSolidTeapot(.5);// Normal write to frame buffer