CS380 LAB II OpenGL

1. CS380 LAB II OpenGL Donghyuk Kim Reference1. [OpenGL course slides by Rasmus Stenholt] Reference2. [http://nehe.gamedev.net/]

2. Goal Introduce OpenGL programming Help you do CS380 homework by yourself

3. Notice Use Noah board for your questions (http://noah.kaist.ac.kr/course/CS380)

4. Outline • Transformations • Modeling Transformations • Draw 3D objects • Translate • Rotate • Scale

5. Transformations • All transformations in OpenGL are carried out by matrices • There are different matrices for different purposes • The modelview matrix • GL_MODELVIEW • The projection matrix • GL_PROJECTION • The texture matrix • GL_TEXTURE • All matrices are post-multiplied • I.e. the current matrix M becomes MN when N is performed • Post-multiplication is closely linked to matrix stacks

6. Transformations • Matrices • All matrices in OpenGL are 4x4 • Why use 4-D matrices for 3-D graphics? • A 4x4 matrix can rotate and translate the same vector in one operation • http://gamedev.stackexchange.com/questions/72044/why-do-we-use-4x4-matrices-to-transform-things-in-3d

7. Transformations • Specify which matrix is the current matrix • Mode • GL_MODELVIEW • Applies subsequent matrix operations to the model view matrix stack • GL_PROJECTION • Applies subsequent matrix operations to the projection matrix stack • etc.

8. Skeleton Code #include <GL/glut.h> #include <GL/glu.h> void display(); int main( int argc, char* argv[] ) { glutInit(&argc, argv); glutInitDisplayMode(GLUT_SINGLE | GLUT_RGBA | GLUT_DEPTH); glutInitWindowSize(512, 512); glutCreateWindow("CS380 LAB"); glutDisplayFunc(display); glutMainLoop(); return 0; } void display(){ glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT); glMatrixMode(GL_MODELVIEW); glLoadIdentity(); glColor3f(1.0,0.0,0.0); glutWireTeapot(0.5); glFlush(); }

9. Set a view int main( int argc, char* argv[] ) { … glutReshapeFunc( reshape ); … } void reshape(int width, int height) { glViewport(0, 0, width, height); glMatrixMode(GL_PROJECTION); glLoadIdentity(); double aspect = width/double(height); gluPerspective(45, aspect, 1, 1024); }

10. Set a view glMatrixMode(GL_PROJECTION); glLoadIdentity(); double aspect = width/double(height); gluPerspective(45, aspect, 1, 1024); • fovy • View angle, in degrees, in the y direction • aspect • Ratio of x (width) to y (height) • zNear • Distance from the viewer to the near clipping plane (positive) • zFar • Distance from the viewer to the far clipping plane (positive)

11. Set a view • Detailed explanations about Viewing Transformation will be provided in the next week.

12. Draw 3D objects • Use a set of OpenGL primitives • e.g., • glBegin(GL_TRIANGLES); • glVertex3f( 0.0f, 1.0f, 0.0f); • glVertex3f(-1.0f,-1.0f, 0.0f); • glVertex3f( 1.0f,-1.0f, 0.0f); • glEnd(); • glBegin(GL_TRIANGLES); • … • glEnd(); • …

13. Draw 3D objects • GLUT provide simple 3D objects • e.g., Teapot object • void glutSolidTeapot(GLdouble size); • void glutWireTeapot(GLdouble size);

14. Draw 3D objects void display(){ glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT); glMatrixMode(GL_MODELVIEW); glLoadIdentity(); glTranslatef(0,0,-1.0); glColor3f(r,g,b); glutWireTeapot(0.5); glFlush(); }

15. Translations • Multiply the current matrix by a translation matrix • x, y, z • Specify the x, y, and z coordinates of a translation vector

16. Translations Translation matrix (4x4) • Multiply the current matrix by a translation matrix

17. Review of Translations glMatrixMode(GL_MODELVIEW); glLoadIdentity(); glTranslatef(0,0,-1.0);

18. Review of Translations Model view matrix glMatrixMode(GL_MODELVIEW); glLoadIdentity(); glTranslatef(0,0,-1.0);

19. Review of Translations Model view matrix glMatrixMode(GL_MODELVIEW); glLoadIdentity(); glTranslatef(0,0,-1.0);

20. Review of Translations Model view matrix glMatrixMode(GL_MODELVIEW); glLoadIdentity(); glTranslatef(0,0,-1.0);

21. Review of Translations Again?? Model view matrix glMatrixMode(GL_MODELVIEW); glLoadIdentity(); glTranslatef(0,0,-1.0); glTranslatef(0,0,-1.0);

22. Review of Translations void display(){ glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT); glMatrixMode(GL_MODELVIEW); glLoadIdentity(); glTranslatef(0,0,-1.0); glTranslatef(0,0,-1.0); glColor3f(r,g,b); glutWireTeapot(0.5); glFlush(); }

23. Tutorials ‘l’ ‘f’ • Move your teapot based on key inputs • ‘l’: left • ‘r’: right • ‘u’: up • ‘d’: down • ‘f’: move out • ‘n’: move in

24. Tutorials float xpos = 0.0; float ypos = 0.0; float zpos = -2.0; void keyboard(unsigned char key, int x, int y){ if (key == 'l') xpos -= 0.1; else if (key == 'r') xpos += 0.1; else if (key == 'u') ypos += 0.1; else if (key == 'd') ypos -= 0.1; else if (key == 'f') zpos -= 0.1; else if (key == 'n') zpos += 0.1; glutPostRedisplay(); } void main(){ … glutKeyboardFunc(keyboard); … } void display(){ … glTranslatef(xpos,ypos,zpos); … }

25. Rotations • angle • angle of rotation, in degrees • x, y, z • x, y, and z coordinates of a vector, respectively • Normalized vector (If not, GL will normalize it)

26. Rotations The questions will be resolved in the CS380 lecture “Modeling Transformations“.

27. Rotations 30 degrees rotation based on a normalized vector (0, 0, 1) void display(){ … glTranslatef(xpos,ypos,zpos); glRotatef(30,0,0,1); … }

28. Tutorials 30 degrees 90 degrees 60 degrees • Rotate your teapot on X axis • e.g., 30, 60, and 90 degrees

29. Tutorials • 30 degrees on X axis • glRotatef(30,1,0,0); • 60 degrees on X axis • glRotatef(60,1,0,0); • 90 degrees on X axis • glRotatef(90,1,0,0);

30. Scaling • x, y, z • scale factors along the x, y, and z axes, respectively

31. Scaling

32. Scaling void display(){ … glLoadIdentity(); glTranslatef(0,0,-3); glScalef(2,1,1); … }

33. Review of Scaling void display(){ … glLoadIdentity(); glTranslatef(0,0,-3); glScalef(2,1,1); … } Model view matrix

34. Review of Scaling void display(){ … glLoadIdentity(); glTranslatef(0,0,-3); glScalef(2,1,1); … } Model view matrix

35. Review of Scaling void display(){ … glLoadIdentity(); glTranslatef(0,0,-3); glScalef(2,1,1); … } Model view matrix

36. Next time • Viewing Transformation in OpenGL