1. OpenGL and Parametric Curves Advanced Multimedia Technology: Computer Graphics Yung-Yu Chuang 2005/12/21 with slides by Brian Curless, Zoran Popovic, Robin Chen and Doug James

2. Review of graphics pipeline Transformation

3. Review of graphics pipeline Projection & clipping

4. Review of graphics pipeline • Rasterization • Visibility

5. Review of graphics pipeline • Shading

6. Hierarchical modeling: a robot arm

7. First implementation

8. Better implementation

9. OpenGL implementation

10. Hierarchical modeling

11. Implementation

12. Human with hands

13. Better implementation

14. OpenGL implementation

15. OpenGL • A low-level OS-independent graphics API for 2D and 3D interactive graphics. • Initiated by SGI (called GL at early time) • Implementation, for Windows, hardware vendors provide suitable drivers for their own products; for Linux, we have Mesa.

16. Helper libraries • OpenGL does not provide OS-dependent functions such as windowing and input • GL: core graphics functions • GLU: graphics utilities in top of GL • GLUT: input and windowing functions

17. How does it work? • From the programmer’s view • Specify geometric properties of the objects • Describe material properties • Define viewing • Define camera and object transformations • OpenGL is a state machine • States: color, material properties, line width, current viewing • States are applied to subsequent drawing commands • Input: description of geometric objects • Output: shaded pixels

18. How does it work • From the implementer’s perspective • Graphics pipeline Primitives + material properties Is it Visible? 3D to 2D Scan conversion Visibility determination Display Rotate Translate Scale

19. Primitives: drawing a polygon // put GL into polygon drawing mode glBegin(GL_POLYGON); // define vertices glVertex2f(x0, y0); glVertex2f(x1, y1); glVertex2f(x2, y2); glEnd(); Code available at http://www.xmission.com/~nate/tutors.html

20. Primitives Hardware may be more efficient on triangles; stripes require less data

21. Polygon restrictions • In OpenGL, polygons must be simple and convex not simple not convex

22. Attributes • Part of the state of the graphics pipeline • Set before primitives are drawn. • Remain in effect! • Example: • Color, including transparency • Reflection properties • Shading properties

23. Primitives: material properties • glColor3f(r,g,b); All subsequent primitives will use this color. Colors are not attached to objects. The above command only changes the system states. • OpenGL uses red, green and blue color model. Each components are ranged within 0 and 1.

24. Primitives: material properties

25. Simple transformations • Rotate by a given angle (in degrees) about ray from origin through (x,y,z) glRotate{fd}(angle, x, y, z); • Translate by a given x, y, z values glTranslate{fd}(x, y, z); • Scale with a factor in the x, y, and z directions glScale{fd}(x, y, z); • glPushMatrix(); glPopMatrix();

26. Orthographic projection • glOrtho(left, right, bottom, top, near, far);

27. Camera transformations • gluLookAt(eyex, eyey, eyez, cx, cy, cz, upx, upy, upz);

28. Example: drawing a box

29. Example: drawing a shaded polygon

30. Initializing attributes

31. Callback functions • Handle “events”, Idle, Keyboard, Mouse, Menu, Motion, Reshape • The display callback is installed by glutDisplayFunc()

32. Actual drawing function

33. Results glShadeModel(GL_FLAT) glShadeModel(GL_SMOOTH)

34. Depth buffer in OpenGL • glutInitDisplayMode(GLUT_DEPTH); • glEnable(GL_DEPTH_TEST); • glClear(GL_DEPTH_BUFFER_BIT);

35. Double buffering • Flicker if drawing overlaps screen refresh • Solution: use two frame buffers • Draw into one buffer • Swap and display, while drawing other buffer • glutInitDisplayMode(GLUT_SINGLE) • glutInitDisplayMode(GLUT_DOUBLE) • glutSwapBuffers()

36. Example: rotate a color cube • Step 1: define the vertices

37. Example: rotate a color cube • Step 2: enable depth testing and double buffering

38. Example: rotate a color cube • Step 3: create window and set callbacks

39. Example: rotate a color cube • Step 4: reshape callback, enclose cube, preserve aspect ratio

40. Example: rotate a color cube • Step 5: display callback, clear, rotate, draw, flush, swap

41. Example: rotate a color cube • Step 6: draw cube by drawing faces, orientation consistency

42. Example: rotate a color cube • Step 7: drawing face

43. Example: rotate a color cube • Step 8: animation, set idle callback spinCube()

44. Example: rotate a color cube • Step 9: change axis of rotation using mouse callback

45. Example: rotate a color cube • Step 10: toggle rotation or exit using keyboard callback

46. Mathematical curve representation

47. Parametric polynomial curves

48. Cubic curves N too small → less flexibility in controlling the shape of the curve N too large → often introduce unwanted wiggles

49. Compact representation

50. Constrain the cubics Hermite: defined by two endpoints and two endpoint tangent vectors Bezier: defined by two endpoints and two other points that control the endpoint tangent vectors Spline: defined by four control points