1. 1 Buffers and Processing Fragments 2011 Autumn Animação e Visualização Tridimensional 2011/2012

2. 2 Buffers Color Buffers: (front|back)- (left|right), Depth Buffer; Stencil Buffer; Accumulation Buffer.

3. 3 OpenGL Architecture Immediate Mode Display List Polynomial Evaluator Per Vertex Operations & Primitive Assembly Rasterization Per Fragment Operations Texture Memory CPU Pixel Operations Frame Buffer geometry pipeline

4. Fragments Operations Fragment tests Blend operations 4

5. 5 Fragments tests Scissor test Culls fragments in a 2D box on screen Alpha test Compares fragment alpha with a constant Culls fragments conditionally Stencil test Compares value of stencil buffer with reference constant Culls fragments conditionally Can apply different operation to stencil value based mode Stencil-fail/S-pass & Z-fail / S-pass & Z-pass Operations: Set, increment, decrements, … Depth test (visibility/occlusion test) Compares Z value with value from Z-buffer Culls fragments conditionally, otherwise updates Z-buffer

6. 6 Blend Operations Merge fragments with frame buffer content Order of operations: Blending operations (aka. compositing) Weighted combination of fragment and pixel values Dithering operation Approximation of color by spatial averaging Different rounding based pixel location Half-Toning“ Logical operations 16 combinations of fragment and pixel values (NOT, AND, OR, XOR)

7. Window Coordinates (OpenGL API) void glScissor (GLint x, GLint y, GLsizei width, GLsizei height) 7 Scissor Test

8. 8 Alpha Test void glAlphaFunc (GLenum func, GLclampf ref); Enum: GL_NEVER, GL_ALWAYS, GL_LESS, GL_LEQUAL, GL_EQUAL, GL_GEQUAL, GL_GREATER, GL_NOTEQUAL

9. 9 How to Use Blending? Remember to enable glEnable(GL_BLEND); Set up blend function glBlendFunc(…,…)

10. 10 Blending Equation We can define source and destination blending factors for each RGBA component s = [s r, s g, s b, s  ] d = [d r, d g, d b, d  ] Suppose that the source and destination colors are b = [b r, b g, b b, b  ] c = [c r, c g, c b, c  ] Blend as c’ = [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  ]

11. 11 OpenGL Blending and Compositing Must enable blending and pick source and destination factors glEnable(GL_BLEND) glBlendFunc(source_factor, destination_factor) Only certain factors supported GL_ZERO, GL_ONE GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA GL_DST_ALPHA, GL_ONE_MINUS_DST_ALPHA See Redbook for complete list

12. 12 Blend Function 2/2 Parameter(f(R), f(G), f(B), f(A)) GL_ZERO(0,0,0,0) GL_ONE(1,1,1,1) GL_SRC_COLOR (RS/kR,GS/kG,BS/kB,AS/kA) GL_ONE_MINUS_SRC_COLOR(1,1,1,1)-(RS/kR,GS/kG,BS/kB,AS/kA) GL_DST_COLOR(Rd/kR,Gd/kG,Bd/kB,Ad/kA) GL_ONE_MINUS_DST_COLOR(1,1,1,1)-(Rd/kR,Gd/kG,Bd/kB,Ad/kA) GL_SRC_ALPHAAS/kA,AS/kA,AS/kA,AS/kA GL_ONE_MINUS_SRC_ALPHA(1,1,1,1) -(AS/kA,AS/kA,AS/kA,AS/kA) GL_DST_ALPHA(AD/kA,AD/kA,AD/kA,AD/kA) GL_ONE_MINUS_DST_ALPHA(1,1,1,1) -(AD/kA,AD/kA,AD/kA,AD/kA)

13. 13 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

14. 14 Order Dependency Is this image correct? Probably not Polygons are rendered in the order they pass down the pipeline Blending functions are order dependent

15. 15 Red Book Example Demo: alpha.c example in chapter 6 of the Red Book

16. 16 Blending Example 1/6 #include #include "glut.h" GLfloat alpha = 0.0; GLfloat pos[4] = {0, 10, 10, 0}; GLfloat dif_l[4] = {1.0, 1.0, 1.0, 1.0}; GLfloat dif_t[4] = {1.0, 0.5, 0.8, 1.0}; GLfloat dif_m[4] = {0.5, 0.8, 0.8, cos(alpha)}; void display(); void reshape(GLsizei, GLsizei); void idle();

17. 17 Blending Example 2/6 void main(int argc, char** argv){ glutInit(&argc, argv); glutInitDisplayMode (GLUT_DOUBLE | GLUT_RGBA | GLUT_DEPTH); glutInitWindowSize (500, 500); glutCreateWindow("Blending"); glEnable(GL_DEPTH_TEST); glEnable(GL_LIGHTING); glutDisplayFunc(display); glutReshapeFunc(reshape); glutIdleFunc(idle); glutMainLoop(); return; }

18. 18 Blending Example 3/6 void reshape(GLsizei w, GLsizei h){ glViewport(0, 0, 500, 500); glMatrixMode(GL_PROJECTION); glLoadIdentity(); gluPerspective(45, 1 / 1, 0.1, 1000); glMatrixMode(GL_MODELVIEW); glLoadIdentity(); gluLookAt(-10, 10, 30, 0, 0, 0, 0, 1, 0); } void idle(){ alpha += 0.05; dif_m[3] = (cos(alpha) + 1) / 2; glutPostRedisplay(); }

19. 19 Blending Example 4/6 void display(){ glClearColor(0, 0, 0, 0); glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT); glEnable(GL_LIGHT0); glLightfv(GL_LIGHT0, GL_POSITION, pos); glLightfv(GL_LIGHT0, GL_DIFFUSE, dif_l); glMaterialfv(GL_FRONT_AND_BACK, GL_DIFFUSE, dif_t); glutSolidTeapot(5);

20. 20 Blending Example 5/6 glEnable(GL_BLEND); glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA); glMaterialfv(GL_FRONT_AND_BACK, GL_DIFFUSE, dif_m); glBegin(GL_POLYGON); glNormal3f(0, 0, 1); glVertex3f(-5, -5, 10); glVertex3f(5, -5, 10); glVertex3f(5, 5, 10); glVertex3f(-5, 5, 10); glEnd(); glFlush(); glutSwapBuffers(); }

21. 21 Blending Example 6/6

22. 22 Billboards Replace a mesh with a pre- computed picture of the mesh Fast to render: a single textured polygon versus many Sometimes called“impostors” Always “aligned” with the viewing direction

23. 23 What to use it for? Scenery Trees, grass, spectators Mesh simplification Replace far-away objects with billboards Non-polygonal objects Fire, smoke, clouds, particles

24. 24 Billboard basics A billboard is a textured rectangle Texture is static Draw billboard where mesh would have been drawn

25. 25 Billboard basics Need to remove texture background Two ways: Masking Alpha blending

26. 26 Billboards by using Masking Billboard fragments alpha values are 0 or 1 Draw billboard fragments with alpha equal to 1 OpenGL: Alpha test void glAlphaFunc (GLenum func, GLclampf ref); Enumerados: GL_NEVER, GL_ALWAYS, GL_LESS, GL_LEQUAL, GL_EQUAL, GL_GEQUAL, GL_GREATER, GL_NOTEQUAL glAlphaFunc (GL_GREATER, 0.0f) glEnable(GL_ALPHA_TEST)

27. 27 Billboards with Blending Billboard fragments alpha values between [0, 1] Blending void glBlendFunc (GLenum sfactor, GLenum dfactor); Enumerados: GL_ZERO, GL_ONE, GL_DST_COLOR, GL_ONE_MINUS_DST_COLOR GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA... glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA) glEnable(GL_BLEND)

28. 28 Opaque and Translucent Polygons Suppose that we have a group of polygons some of which are opaque and some translucent How do we use hidden-surface removal? Opaque polygons block all polygons behind them and affect the depth buffer Translucent polygons should not affect depth buffer Render with glDepthMask(GL_FALSE) which makes depth buffer read-only Sort polygons first to remove order dependency

29. 29 3D Blending with the Depth Buffer Steps: Enable Depth Buffering Draw all the opaque objects (how?) Make the depth-buffer read-only (why?) Draw the translucent objects with blending. Figure out the correct order of rasterization

30. 30 How to Use Fog? Remember to enable glEnable(GL_FOG); Set up fog function glFogf(…,…)

31. 31 Fog Function 1/2 glFog{f,i}[v]{GLenum pname, param} Pname param GL_FOG_MODE GL_LINEAR, GL_EXP, GL_EXP2 GL_FOG_DENSITY default : 1.0 GL_FOG_STARTdefault : 0.0 GL_FOG_ENDdefault : 1.0 GL_FOG_INDEX default : 0.0 GL_FOG_COLORdefault : (0,0,0,0)

32. 32 Fog Function 2/2 GL_LINEAR GL_EXP GL_EXP2 COLOR:

33. 33 How to use stencil buffer? 1. glutInitDisplayMode(GLUT_STENCIL); 2. glEnable(GL_STENCIL_TEST); 3. glClearStencil(0); 4. glClear(GL_STENCIL_BUFFER_BIT);

34. 34 Stencil Testing 1/2 void glStencilFunc( GLenum func, GLint ref, GLuint mask ); sets the function and reference value for stencil testing. func: test function, see next page. ref: reference value mask:A mask that is ANDed with both the reference value and the stored stencil value when the test is done.

35. 35 Stencil Testing 2/2 paramMeaning GL_NEVER Always fails. GL_LESS Passes if ( ref & mask) < ( stencil & mask). GL_LEQUAL Passes if ( ref & mask) ≤ ( stencil & mask). GL_GEQUAL Passes if ( ref & mask) ≥ ( stencil & mask). GL_NOTEQUAL Passes if ( ref & mask) ( stencil & mask). GL_ALWAYS Always passes.

36. 36 Modify stencil buffer 1/2 void glStencilOp( GLenum fail, GLenum zfail, GLenum zpass ); sets the stencil test actions. fail: The action to take when the stencil test fails zfail: Stencil action when the stencil test passes, but the depth test fails. zpass: both the stencil test and the depth test pass

37. 37 Stencil buffer + Z buffer

38. 38 Modify stencil buffer 2/2 paramMeaning GL_KEEPkeep the current value GL_ZEROset the value in stencil buffer to zero GL_REPLACEset the value in stencil buffer to ref in glStencilFunc() GL_INCRincrease the current value in stencil buffer GL_DECRdecrease the current value in stencil buffer GL_INVERTbitwise inverse the current value in stencil buffer

39. Red Book example Demo: stencil.c example in chapter 10 of the Red Book 39

40. 40 Another Stencil buffer example 1/3 #include void GL_display(){ glEnable(GL_DEPTH_TEST); glEnable(GL_STENCIL_TEST); glClearStencil(0); glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT | GL_STENCIL_BUFFER_BIT); glStencilFunc(GL_ALWAYS, 1, 1); glStencilOp(GL_REPLACE, GL_REPLACE, GL_REPLACE); glColor3f(0.0, 1.0, 1.0); glutSolidCube(16.0); glClear(GL_DEPTH_BUFFER_BIT); glStencilOp(GL_KEEP, GL_KEEP, GL_INVERT); glStencilFunc(GL_EQUAL, 1, 1); glColor3f(1.0, 1.0, 1.0); glutSolidTeapot(8); glFlush(); }

41. 41 Stencil buffer example 2/3 void GL_reshape(GLsizei w, GLsizei h) { glViewport(0, 0, w, h); glMatrixMode(GL_PROJECTION); glLoadIdentity(); gluPerspective(60.0, (GLfloat)w/(GLfloat)h, 0.5, 100.0); glMatrixMode(GL_MODELVIEW); glLoadIdentity(); gluLookAt(0.0, 0.0, 50.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0); } int main(int argc, char** argv) { glutInit(&argc, argv); glutInitWindowSize(400, 400); glutInitWindowPosition(0, 0); glutInitDisplayMode(GLUT_SINGLE | GLUT_RGBA | GLUT_DEPTH | GLUT_STENCIL); glutCreateWindow("Stencil Buffer"); glutDisplayFunc(GL_display); glutReshapeFunc(GL_reshape); glutMainLoop(); }

42. 42 Stencil buffer example 3/3

43. 43 Other example… 1/2 void GL_display(){ glEnable(GL_DEPTH_TEST); glEnable(GL_STENCIL_TEST); glClearStencil(0); glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT | GL_STENCIL_BUFFER_BIT); glStencilFunc(GL_ALWAYS, 1, 1); glStencilOp(GL_REPLACE, GL_REPLACE, GL_REPLACE); glColor3f(0.0, 1.0, 1.0); glutSolidCube(16.0); glClear(GL_DEPTH_BUFFER_BIT); glStencilOp(GL_KEEP, GL_KEEP, GL_INVERT); glStencilFunc(GL_EQUAL, 1, 1); glColor3f(1.0, 1.0, 1.0); glutSolidTeapot(8); glStencilFunc(GL_NOTEQUAL, 1, 1); glColor3f(1.0, 1.0, 0.0); glPushMatrix(); glTranslatef(10, 0, 0); glutSolidSphere(12, 10, 6); glPopMatrix(); glFlush(); }

44. 44 Other example… 2/2

45. 45 Cooler example…

46. 46 How to use accumulation buffer? glutInitDisplayMode(GLUT_ACCUM); glClear(GL_ACCUM_BUFFER_BIT);

47. 47 Accumulation function void glAccum( GLenum op, GLfloat value ); operates on the accumulation buffer. op: The accumulation buffer operation. See next page. value: also see next page.

48. 48 Accumulation function opMeaning GL_ACCUMread each pixel from the color buffer, multiplies the R, G, B, and alpha values by value, then add the result to accumulation buffer. GL_LOADthe same as GL_ACCUM, but replace the value in accumulation rather than add. GL_RETURNread values from the accumulation buffer, multiplies them by value, and places the result in the color buffers. GL_ADD / GL_MULTsimply add / multiply the values of each pixel in the accumulation buffer by value, and return to the accumulation buffer. (GL_MULT will clamp value from –1.0 to 1.0 while GL_ADD will not.)

49. 49 Supersampling Multiple samples per pixel: each pixel is divided into several sub-pixels Multiple samples per pixel are taken in various ways and these are blended together to give the resulting pixel

50. 50 Supersampling example Viewport resolution 2 x 2

51. 51 Filter 3 x 3

52. 52 Virtual Image

53. 53 Weighted filter 3 x 3

54. Rendering multiple images Example: 3 x 3 filter Avoid to use 9 x original image resolution memory Solution: rendering 9 times the entire scene with the original resolution Each rendering is obtained by jittering a sub- pixel amount in screen space Each final pixel is the average of the images that intersect it. 54

55. 55 Antialiasing with accumulation buffer entire scene is offset (jittered) by small, subpixel amounts in screen space, and accumulated. Enable and clear the accumulator GL ACCUM reads each pixel from the current color buffer and multiplies the R,G,B,and alpha values by 1/n and adds the result to the accumulator. Scene gets drawn n times with slight perturbations (jittering), so that each pixel is the average of the images that intersect it. GL_RETURN copies the values into the color buffer for viewing. glClearAccum(r; g; b; alpha) glClear(GL ACCUM BUFFER BIT) glAccum(GL ACCUM; 1/n) glAccum(GL RETURN; 1.0)

56. Antialiasing example Demo: accpersp.c example in Chapter 10 “The Framebuffer” of the Red Book Final scene results from the accumulation of 8 jittered images Jittering an image implies a slightly changing in the corresponding frustum dx = jitter_x*(xwsize / viewport[2]) dy = jitter_y*(ywsize / viewport[3]) For each image rendering the viewpoint remains unchanged which implies the use of non-symmetric frustum 56

57. Depth of Field effect Demo: dof.c example in chapter 10 of the Red Book Scene drawn 8 times corresponding to jittering 8 times the viewpoint Jitter the volume while holding it stationary at the focal plane Teapot located in focal plane is “in focus” Teapots not in the focal plane get blurred 57

58. Depth of Field effect 58

59. Non-symmetric frustum 59

60. 60 Other accumulation example 1/3 #include void GL_display() { // clear the buffer glClearColor(0.0, 0.0, 0.0, 0.0); glClearAccum(0.0, 0.0, 0.0, 0.0); glClear(GL_ACCUM_BUFFER_BIT); for(int i = 0; i < 360; i++){ glClear(GL_COLOR_BUFFER_BIT); glColor3f(1.0, 1 - (float)i / 180, 1 - (float)i / 360); glPushMatrix(); glTranslatef(0, -6, -10); glRotatef(i,0, 1, 0); glutWireTeapot(5); glPopMatrix(); glAccum(GL_ACCUM, 0.01); } glAccum(GL_RETURN, 1.0) ; glutSwapBuffers(); }

61. 61 Accumulation example 2/3 void GL_reshape(GLsizei w, GLsizei h) { glViewport(0, 0, w, h); glMatrixMode(GL_PROJECTION); glLoadIdentity(); gluPerspective(60.0, (GLfloat)w/(GLfloat)h, 1.0, 20.0); glMatrixMode(GL_MODELVIEW); glLoadIdentity(); gluLookAt(0.0, 3.0, 5.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0); } int main(int argc, char** argv) { glutInit(&argc, argv); glutInitWindowSize(500, 500); glutInitWindowPosition(0, 0); glutInitDisplayMode(GLUT_DOUBLE | GLUT_RGB | GLUT_ACCUM); glutCreateWindow("Accumulation"); glutDisplayFunc(GL_display); glutReshapeFunc(GL_reshape); glutMainLoop(); }

62. 62 Accumulation example 3/3 Motion blur

63. 63 Accumulation example 2 1/3 #include void GL_display() { glClearColor(0.0, 0.0, 0.0, 0.0); glClearAccum(0.0, 0.0, 0.0, 0.0); glClear(GL_ACCUM_BUFFER_BIT); for(int i = 0; i < 30; i++){ glClear(GL_COLOR_BUFFER_BIT); glLoadIdentity(); gluLookAt(i * 0.01, 0.0, 3.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0); glPushMatrix(); glTranslatef(0, 4, -10); glColor3f(1, 0, 0); glutWireTeapot(2); glPopMatrix(); glAccum(GL_ACCUM, 0.03333); } glAccum(GL_RETURN, 1.0) ; glPushMatrix(); glColor3f(1, 1, 1); glutWireTeapot(1); glPopMatrix(); glutSwapBuffers(); }

64. 64 Accumulation example 2 2/3 void GL_reshape(GLsizei w, GLsizei h) { glViewport(0, 0, w, h); glMatrixMode(GL_PROJECTION); glLoadIdentity(); gluPerspective(60.0, (GLfloat)w/(GLfloat)h, 1.0, 50.0); glMatrixMode(GL_MODELVIEW); glLoadIdentity(); } int main(int argc, char** argv) { glutInit(&argc, argv); glutInitWindowSize(500, 500); glutInitWindowPosition(0, 0); glutInitDisplayMode(GLUT_DOUBLE | GLUT_RGB | GLUT_ACCUM); glutCreateWindow("Accumulation"); glutDisplayFunc(GL_display); glutReshapeFunc(GL_reshape); glutMainLoop(); }

65. 65 Accumulation example 2 3/3

66. 66 Cooler example

67. Buffers Wrap-Up Open GL Buffer n x m elements of k bits 67

68. Buffers Wrap-up OpenGL Frame Buffer 68