1. MAE152 Computer Graphics for Scientists and Engineers Antialiasing Fall 2003

2. Antialiasing Contents “Discretization” and consequences What is aliasing and it’s solution (antialiasing) Antialiasing implemented by OpenGL

3. Samples most things in the real world are continuous everything in a computer is discrete the process of mapping a continuous function to a discrete one is called sampling the process of mapping a discrete function to a continuous one is called reconstruction the process of mapping a continuous variable to a discrete one is called discretization rendering an image requires sampling and discretization displaying an image involves reconstruction

4. Imaging Devices Area Sample eye : photoreceptors J. Liang, D. R. Williams and D. Miller, "Supernormal vision and high- resolution retinal imaging through adaptive optics," J. Opt. Soc. Am. A 14, 2884- 2892 (1997) Film is similar : irregular array of receptors.

5. Images an image is a 2D function I(x, y) that specifies intensity for each point (x, y)

6. Imaging Devices Area Sample video camera : CCD array. Regular array of imaging sensors. y x Value sensed is an area integral over a pixel. Intensity, I

7. Slide © Rosalee Nerheim-Wolfe Continuous Luminosity Signal

8. Slide © Rosalee Nerheim-Wolfe Sampled Luminosity

9. Slide © Rosalee Nerheim-Wolfe Reconstructed Luminosity

10. Slide © Rosalee Nerheim-Wolfe Reconstruction Artefact

11. Line Segments If we tried to sample a line segment so it would map to a 2D raster display… we would see stair steps, or jaggies … since we “quantized” the pixel values to 0 or 1.

12. Line Segments instead, quantize to many shades but what sampling algorithm is used?

13. Aliasing The effect created when rasterization is performed over a discrete series of pixels. In particular, when lines or edges do not necessarily align directly with a row or column of pixels, that line may appear unsmooth and have a stair-step edge appearance. Antialiasing utilizes blending techniques to blur the edges of the lines and provide the viewer with the illusion of a smoother line. Points, lines or polygons can be antialiased.

14. Anti-Aliasing Two general approaches: Area sampling and super- sampling Area sampling approaches sample primitives with a box (or Gaussian, or whatever) rather than spikes Requires primitives that have area (lines with width) Sometimes referred to as pre-filtering Super-sampling samples at higher resolution, then filters down the resulting image Sometimes called post-filtering The prevalent form of anti-aliasing in hardware

15. Area Sampling shade pixels according to the area covered by thickened line this is unweighted area sampling a rough approximation formulated by dividing each pixel into a finer grid of pixels

16. Unweighted Area Sampling Consider a line as having thickness (all good drawing programs do this) Consider pixels as little squares Fill pixels according to the proportion of their square covered by the line Other variations weigh the contribution according to where in the square the primitive falls 1/8.914 1/8 1/4 00 00 000 0 0 0 0 000

17. Alpha-based Anti-Aliasing Rather than setting the intensity according to coverage, set the  The pixel gets the line color, but with  <=1 This supports the correct drawing of primitives one on top of the other Draw back to front, and composite each primitive over the existing image Only some hidden surface removal algorithms support it 1/8.914 1/8 1/4 00 00 00 0 0 0 0 0 000

18. Super-sampling Sample at a higher resolution than required for display, and filter image down Issues of which samples to take, and how to average them 4 to 16 samples per pixel is typical Samples might be on a uniform grid, or randomly positioned, or other variants Number of samples can be adapted

19. Unweighted Area Sampling primitive cannot affect intensity of pixel if it does not intersect the pixel equal areas cause equal intensity, regardless of distance from pixel center to area unweighted sampling colors two pixels identically when the primitive cuts the same area through the two pixels intuitively, pixel cut through the center should be more heavily weighted than one cut along corner

20. Weighted Area Sampling weighting function, W(x,y) specifies the contribution of primitive passing through the point (x, y) from pixel center x Intensity W(x,y)

21. Antialiasing in OpenGL OpenGL calculates a coverage value for each fragment based on the fraction of the pixel square on the screen that it would cover. In RGBA mode, OpenGL multiplies the fragment’s alpha value by its coverage. Resulting alpha value is used to blend the fragment with the corresponding pixel already in the frame buffer.

22. Antialiasing (Cont.)

23. Hints With OpenGL, you can control the behavior of anti- aliasing effects by using the glHint() function: void glHint(GLenum target, GLenum hint); target: parameter indicates which behavior is to be controlled. Specifies the desired sampling quality of points, lines or polygons during antialiasing operations target parameter can be GL_POINT_SMOOTH_HINT GL_LINE_SMOOTH_HINT GL_POLYGON_SMOOTH_HINT GL_FOG_HINT GL_PERSPECTIVE_CORRECTION_HINT

24. glHint(target, hint) hint: parameter specifies the approach hint parameter can be GL_FASTEST (the most efficient option) GL_NICEST (the highest-quality option) GL_DONT_CARE (no preference)

25. Enabling Antialiasing Anti aliasing is enabled using the glEnable() command, We can enable GL_POINT_SMOOTH or GL_LINE_SMOOTH modes. With RGBA mode, you must also enable blending to utilize GL_SRC_ALPHA as the source factor and GL_ONE_MINUS_SRC_ALPHA as the destination factor. Using a destination factor of GL_ONE will make intersection points a little brighter.

26. Antialiasing Lines init() { glEnable (GL_LINE_SMOOTH); glEnable (GL_BLEND); glBlendFunc (GL_SRC_ALPHA, GL_ONE_MINUS_SOURCE_ALPHA); glHint (GL_LINE_SMOOTH_HINT, GL_NICEST); draw_lines_here(); }

27. Antialiasing Polygons Study OpenGL Book We can also use accumulation buffer Using accumulation buffer is easier to understand than using blending, but computationally more expensive.

28. Demo Intersecting lines

29. Antialiasing Example The following example demonstrates the use of anti aliasing techniques using the blending and line smoothing. The program renders a wired dodecahedron and then allows the user to view through the standard model viewing capabilities using the keyboard for axis positioning and the arrow and page up/down keys for incrementing or decrementing eye point positions. Depressing an 'a' will toggle antialiasing. Depressing a b toggles between two different alpha blending settings and depressing an "l" will vary the thickness of the objects lines.

30. Antialiasing Example Without anti-aliasing:

31. Antialiasing Example With anti-aliasing:

32. Antialiasing Example #include #ifdef __FLAT__ #include #endif #include static float rotAngle = 0; static GLbooleanantialiasFlag = GL_FALSE; GLfloat nearClip, farClip; GLdouble eyex=0.0, eyey=0.0, eyez=15.0; void init() { GLfloat maxObjectSize = 3.0; glClearColor( 0.0, 0.0, 0.0, 0.0); glShadeModel( GL_FLAT); nearClip = 1.0; farClip = nearClip + 80*maxObjectSize; glBlendFunc( GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA); glLineWidth(4.5); glEnable( GL_DEPTH_TEST); }

33. Antialiasing Example void blendFuncCycle( GLvoid) { static int whichBlendFunc = 0; whichBlendFunc = (whichBlendFunc + 1) %2; switch(whichBlendFunc) { case 0:glBlendFunc( GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);break; case 1:glBlendFunc( GL_SRC_ALPHA, GL_ONE); break; default:break; } void drawAntialiasedObjects() { static GLfloatyellow[] = { 1.0, 1.0, 0.0, 1.0 }; if ( antialiasFlag == GL_TRUE){ glEnable( GL_LINE_SMOOTH); glEnable( GL_BLEND); } glPushMatrix(); glColor4fv( yellow ); glScalef( 2.0, 2.0, 2.0 ); glutWireDodecahedron(); glPopMatrix(); if ( antialiasFlag == GL_TRUE ) { glDisable( GL_LINE_SMOOTH); glDisable( GL_BLEND); }

34. Antialiasing Example void display(void) { glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT ); glLoadIdentity(); gluLookAt(eyex, eyey, eyez, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0); drawAntialiasedObjects(); glFlush(); } void reshape (int width, int height) { GLdouble aspect; glViewport( 0, 0, width, height ); aspect = (GLdouble) width / (GLdouble) height; glMatrixMode( GL_PROJECTION); glLoadIdentity(); gluPerspective( 45.0, aspect, nearClip, farClip ); glMatrixMode( GL_MODELVIEW ); } void setEyePoint(void) { eyex=0.0; eyey=0.0; eyez = 15.0; return; }

35. Antialiasing Example void specialkeys( int key, int x, int y ) { switch (key) { case GLUT_KEY_LEFT:eyex--; break; case GLUT_KEY_RIGHT:eyex++; break; case GLUT_KEY_DOWN:eyey--; break; case GLUT_KEY_UP:eyey++; break; case GLUT_KEY_PAGE_UP:eyez++; break; case GLUT_KEY_PAGE_DOWN:eyez--;break; case GLUT_KEY_HOME:setEyePoint(); break; case GLUT_KEY_END: exit(0);break; default: break; } glutPostRedisplay(); } void keyboard(unsigned char key, int x, int y ) { static float lineWidth = 0.5; switch(key) { case 'a': case 'A': antialiasFlag = ! antialiasFlag; if (antialiasFlag == GL_TRUE) { glEnable( GL_POINT_SMOOTH ); glEnable ( GL_LINE_SMOOTH ); }

36. Antialiasing Example else { glDisable( GL_POINT_SMOOTH ); glDisable( GL_LINE_SMOOTH ); } break; case 'b': blendFuncCycle(); break; case 'l': lineWidth += 0.5; if (lineWidth >= 8.0) lineWidth = 0.5; glLineWidth(lineWidth); break; case 'x': eyex=12.0; eyey=0.0; eyez=0.0; break; case 'y': eyex=0.05; eyey=12.0; eyez=0.0; break; case 'z': eyex=0.0; eyey=0.0; eyez=12.0; break; case 27: case 'e': case 'E': exit(0);break; default: break; } glutPostRedisplay(); }

37. Antialiasing Example int main(int argc, char** argv) { glutInit(&argc, argv); glutInitDisplayMode(GLUT_SINGLE | GLUT_RGB); glutInitWindowSize(500, 500); glutCreateWindow( argv[0]); init(); glutReshapeFunc(reshape); glutKeyboardFunc(keyboard); glutDisplayFunc(display); glutSpecialFunc( specialkeys ); glutMainLoop(); return 0; }

38. Fog General term that describes similar forms of atmospheric effects Haze, mist, smoke, or pollution Can make an entire image appear more natural by adding fog, which makes objects fade into the distance. Fog is applied after matrix transformations, lighting, and texturing are performed. With large simulation programs, fog can improve performance.

39. Defining Fog in OpenGL glFogf(GL_FOG_MODE, GL_EXP); GL_EXP2 GL_LINEAR glFogf(GL_FOG_DENSITY, 0.5); glFogf(GL_FOG_START, 0.0); glFogf(GL_FOG_DENSITY, 1.0); In RGBA mode, the fog factor f is C = fC i + (1-f)C f C i is incoming fragment’s RGBA value, C f is fog-color value.

40. Fog Equations

41. Sample Code init() { Glfloat fogcolor[4] = {0.5, 0.5, 0.5, 1.0}; glEnable(GL_FOG); glFogi (GL_FOG_MODE, GL_EXP); glFogfv (GL_FOG_COLOR, fogColor); glFogf (GL_FOG_DENSITY, 0.35); glFogf (GL_FOG_HINT, GL_NICEST); glFogf (GL_FOG_START, 1.0); glFogf (GL_FOG_END, 5.0); }

42. Polygon Offset Because lines and filled polygons are not rasterized in exactly the same way, the depth values generated for pixels on a line are usually not the same as the depth values for a polygon edge. To eliminate visual artifacts (stiches), adds an appropriate offset to force coincident z values apart to cleanly separate a polygon edge. Three ways to turn on polygon offset GL_FILL, GL_LINE, GL_POINT Must also call glPolygonMode() to set the current polygon rasterization method.

43. Polygon Offset (Cont.) The Offset value o is calculated by m : maximum depth slope r : the smallest value guaranteed to produce a resolvable difference in window coordinate depth value When enabled, the depth value of each fragment is added to a calculated offset value. glPolygonOffset(GLfloat factor, GLfloat units)

44. Sample Code glEnable (GL_LIGHTING); glEnable (GL_LIGHT0); glEnable (GL_POLYGON_OFFSET_FILL); glPolygonOffset(1.0, 1.0); glCallList (list); glDisable (GL_POLYGON_OFFSET_FILL); // To highlight the edges of the object, the object is rendered as an unlit wireframe with the offset disabled. glDisable (GL_LIGHTING); glDisable (GL_LIGHT0); glColor3f (1.0, 1.0, 1.0); glPolygonMode(GL_FRONT_AND_BACK, GL_LINE); glCallList (list); glPolygonMode(GL_FRONT_AND_BACK, GL_FILL);

45. End of Antialiasing and Fog