OpenGL Introduction and HW1 Guide

1. OpenGL Introductionand HW1 Guide Speaker:MingOuhyoung, TA 汪心威 2012TA:Yu Tu CSIE M2 Virtual Reality 2013

2. This guide is talking about…

3. 1.Part of computer graphics 2.OpenGL introduction 3.Sample codes discussion : line.cpp, robot.c, dance.c

4. VRHw#1Requirements • Homework # 1 : Articulated Animal (and Human) Animation • Simulation(real time) of articulated animals (including men) • 1 ~ 3 minutes of animation (Demo final results at class) • With short real-time manipulation of a few actions • C,C++, Java ,with OpenGL,MS SDK...etc are OK • due date:  2013/04/22

5. Key frame animation • key frame in animation and filmmaking is a drawing that defines the starting and ending points of any smooth transition. • One frame at a time, the most popular and yet oldest animation generation method (Disney animation, Snow White) • See the demo at http://en.wikipedia.org/wiki/Key_frame

6. Snow White and the Seven Dwarfs (1937)

7. Part of computer graphics

8. Computer Graphics Pipeline

9. Model in Graphics - object observation

10. Model in Graphics - coordinate system Camera coordinate World coordinate Image coordinate

11. OpenGL Introduction

12. What is OpenGL • A Graphics rendering API introduced in 1992 by Silicon Graphics Inc • Produces high-quality color images composed of geometric and image primitives • Cross-platform

13. Related APIs Application program GLU X Window, Windows, Mac OSX AGL,WGL,GLX GLUT GL Software and/or hardware

14. OpenGL Utility Toolkit (GLUT) • Visual Studio 2010/2008, Visual C++ 2010/2008 • http://www.xmission.com/~nate/glut.html • Add glut32.dll toC:\Windows\SysWOW64 • Add glut32.lib toC:\Program Files (x86)\Microsoft Visual Studio 10.0\VC\lib • Add glut.h toC:\Program Files (x86)\Microsoft Visual Studio 10.0\VC\include\GL (System32) (9.0) (9.0)

15. HelloWorld #include <GL/glut.h> voidGL_display(); void GL_reshape(GLsizei w, GLsizei h); void main(void) { glutCreateWindow(“HelloWorld"); glutDisplayFunc(GL_display); glutReshapeFunc(GL_reshape); glutMainLoop(); }

16. HelloWorld voidGL_display() { glClearColor(0.0f, 0.0f, 0.0f, 0.0f); glClear(GL_COLOR_BUFFER_BIT); glBegin( GL_LINES ); glColor3f(0.0f, 1.0f, 0.0f); glVertex3f(1.0f, 1.0f, 0.0f); glVertex3f(-1.0f, -1.0f, 0.0f); glColor3f(1.0f, 0.0f, 0.0f); glVertex3f(-1.0, 1.0f, 0.0f); glVertex3f(1.0f, -1.0f, 0.0f); glEnd(); glFlush(); }

17. Primitives

18. HelloWorld voidGL_display() { glClearColor(0.0f, 0.0f, 0.0f, 0.0f); glClear(GL_COLOR_BUFFER_BIT); glBegin( GL_LINES ); glColor3f(0.0f, 1.0f, 0.0f); glVertex3f(1.0f, 1.0f, 0.0f); glVertex3f(-1.0f, -1.0f, 0.0f); glColor3f(1.0f, 0.0f, 0.0f); glVertex3f(-1.0, 1.0f, 0.0f); glVertex3f(1.0f, -1.0f, 0.0f); glEnd(); glFlush(); }

19. HelloWorld void GL_reshape(GLsizei w, GLsizei h) { glViewport(0, 0, w, h); glMatrixMode(GL_PROJECTION); glLoadIdentity(); glOrtho(-2.0f, 2.0f, -2.0f, 2.0f, -2.0f, 2.0f); glMatrixMode(GL_MODELVIEW); glLoadIdentity(); }

20. Now that you have done your first OpenGL Program, let’s talk about something advanced.

21. Matrix in OpenGL • There are two matrix stacks. • ModelView matrix (GL_MODELVIEW) • Projection matrix (GL_PROJECTION) • When we call functions of transformation, we should change to the appropriate matrix stack first. • glMatrixMode(GL_MODELVIEW); • //now we are in modelview matrix stack! • //do modelview transformation here….. • glMatrixMode(GL_PROJECTION); • //now we are in projection matrix stack! • //do projection transformation here…. Vertex ModelView Projection

22. Projection Matrix • Orthographic Projection • glOrtho( GLdouble left, GLdouble right, GLdouble bottom, GLdouble top, GLdouble near, GLdouble far ) • gluOrtho2D( GLdouble left, GLdouble right, GLdouble bottom, GLdouble top)

23. Projection Matrix • Perspective Projection • gluPerspective( GLdoublefovy, GLdouble aspect, GLdouble near, GLdouble far ); • glFrustum( GLdouble left, GLdouble right, GLdouble bottom, GLdouble top, GLdouble near, GLdouble far );

24. ModelView Matrix • Modeling Transformation • Perform rotate, translate, scale and combinations of these transformations to the object. • Viewing Transformation • To positioning and aiming the camera

25. Modeling Transformations • glTranslatef(x, y, z) • Multiplies current matrix by a matrix that moves an object by x,y,z glTranslatef( 0, 0, -1)

26. Modeling Transformations • glRotatef(angle, x, y, z ) • Multiplies current matrix by a matrix that rotates an object in a counterclockwise direction about the ray from origin to (x,y,z) with angle as the degrees glRotatef( 45.0, 0, 0, 1)

27. Modeling Transformations • glScalef(x, y, z) • Multiplies current matrix by a matrix that scales an object along axes. glScalef( 2.0, -0.5, 1)

28. Viewing Transformations gluLookAt (eyex, eyey, eyez, atx, aty, atz, upx, upy, upz);

29. Matrix Order Matrix Multiplication Matrix Stack: Code: glMatrixMode(GL_PROJECTION) gluPerspective glMatrixMode(GL_MODELVIEW) gluLookAt glRotatef glTranslatef glScalef glBegin glVertex3f glEnd glVertex3f glScalef glRotatef gluPerspective gluLookAt glTranslatef glRotatef gluLookAt gluPerspective = glVertex3f Vi glScalef glTranslatef

30. Matrix Order The order of transformations is critical. glRotatef(45.0, 0,0,1 ); glTranslatef( 1,0,0 ); drawObject(); glTranslatef( 1,0,0 ); glRotatef(45.0, 0,0,1 ); drawObject();

31. Interactive Setting and Display • Glut Window functions: • glutInit(&argc, argv); • glutInitDisplayMode(GLUT_DOUBLE | GLUT_RGB); • glutInitWindowSize(800, 600); • glutInitWindowPosition(100, 100); • glutCreateWindow(“Name"); • glutDisplayFunc(display); • glutReshapeFunc(reshape); • Interactive setting functions: • glutKeyboardFunc(keyboard); • glutMouseFunc(mouse); • glutMotionFunc(motion);

32. Wake up for The most important topic.

33. Mantain matrix stack • glPushMatrix() : save the current matrix • glPopMatrix() : restore the saved matrix x glScalef glPushMatirx() glPopMatrix()

34. Heirarchy Modeling Body head Lefthand Righthand Leftleg Rightleg Finger 2 Finger 1

35. Heirarchy Modeling Matrix Stack: Current Matrix Stack

36. Heirarchy Modeling Push glPushMatrix(); Matrix Stack: Current Matrix Stack

37. Heirarchy Modeling Push glTranslatef(); Matrix Stack: x Current Matrix Stack

38. Heirarchy Modeling Push DrawBody(); Matrix Stack: Current Matrix Stack

39. Heirarchy Modeling Push glPushMatrix(); Matrix Stack: Push Current Matrix Stack

40. Heirarchy Modeling Push glRotatef(); Matrix Stack: Push x Current Matrix Stack

41. Heirarchy Modeling Push glTranslatef(); Matrix Stack: Push x Current Matrix Stack

42. Heirarchy Modeling Push DrawHead(); Matrix Stack: Push Current Matrix Stack

43. Heirarchy Modeling Push glPopMatrix(); Matrix Stack: Push Pop Current Matrix Current Matrix Stack

44. Heirarchy Modeling Push glPushMatrix(); Matrix Stack: Push Push Pop Current Matrix Stack

45. Heirarchy Modeling Push glRotatef(); Matrix Stack: Push Push Pop x Current Matrix Stack

46. Heirarchy Modeling Push DrawHand(); Matrix Stack: Push Push Pop Current Matrix Stack

47. Heirarchy Modeling Push glPushMatrix(); Matrix Stack: Push Push Pop Push Current Matrix Stack

48. Heirarchy Modeling Push glTranslatef(); Matrix Stack: Push Push Pop Push x Current Matrix Stack

49. Heirarchy Modeling Push glPopMatrix(); Matrix Stack: Push Push Pop Push Pop Current Matrix Current Matrix Stack

50. Heirarchy Modeling Push DrawFinger(); Matrix Stack: Push Push Pop Push Current Matrix Stack