1. COS 397 Computer Graphics Assoc. Prof. Svetla Boytcheva AUBG 2013 COS 397 Computer Graphics Practical Session №1 Introduction to OpenGL, GLFW and CG

2. Outline Task 1:CodeBlock, GLFW & OpenGL testing Task 2:Full Screen mode Task 3:Graphical Application Structure Task 4:Alternative Structure of Graphical Application Task 5:OpneGL primitives – points, lines, triangles, squares, polygons Task 6:Cube vertices Task 7:Cube edges Task 8: Cube Size Parameterization Task 9:Concentric Cubes Task 10:Cube Center Parameterization

3. Learning Outcomes –Introduction to OpenGL (1.x) in level to design and implement simple 3D animations –Implementation of simple CG algorithms

4. Required software –OpenGL, GLU, GLFW, GCC –Code::Blocks –Information about OpenGL 1.x http://www.opengl.org/registry/ http://www.glprogramming.com/red/ http://www.opengl.org/registry/ http://www.glprogramming.com/red/ http://www.opengl.org/registry/ http://www.glprogramming.com/red/ Alternative software –MESA, FreeGLUT, GLUT, Notepad, C compiler Software

5. Task №1 CodeBlock, GLFW & OpenGL Testing Let’s Begin: –Code::Blocks –GNU GCC Compiler –GLFW 2.7.7 32-bit

6. Task №1 Create New project –File → New → Project → GLFW Project

7. Settings –Choose project name and browse for location –Browse to select the folder where is GLFW library stored

8. Hint –Code::Blocks should explicitly “know” where is GLFW 2.7 library

9. Result –Automatically generated GLFW project –Build and Run

10. Project Result

11. Task №2 Full Screen mode GLFW functions –GLFW Reference Manual http://www.glfw.org/GLFWUsersGuide277.pdf sections 3.1.1, 3.1.2 и 3.2.1 http://www.glfw.org/GLFWUsersGuide277.pdf Changes in glfwOpenWindow() – Parameter GLFW_FULLSCREEN

12. Task № 3: Graphical Application Structure Minimal Skeleton of GLFW code #include #include int main()int main(){ glfwInit(); glfwInit(); glfwOpenWindow(512,512,0,0,0,0,0,0,GLFW_WINDOW); glfwOpenWindow(512,512,0,0,0,0,0,0,GLFW_WINDOW); while(…) while(…) { { //Using OpenGL, GLU, GLFW functions //Using OpenGL, GLU, GLFW functions } } glfwTerminate(); glfwTerminate(); return 0; return 0;}

13. Graphical Application Structure Structure of GLFW Application –GLFW Initialization –OpenGL window opening –Animation frame (scene) generation –Termination

14. Graphical Application Structure Animation frame (scene) generation –Buffers Cleaning –Projection Type Setting –View Point Setting –Drawing a frame in the hidden buffer –Swapping the hidden buffer with the visible one Task –Identify these elements in generated source code in Task 1

15. Alternative Structure of Minimal GLFW Application Proposed in GLFW Reference Manual

16. Task №4 Alternative Structure of Graphical Application Define the following functions: –bool running() – to test whether to continue running –void init() – to initialize the graphical window, to set perspective, to set point of view and etc. –void finit() – to close the graphical window and to terminate the process

17. Alternative Structure of Minimal GLFW Application #include #include bool running() { // definition } void init() { // definition } void finit() { // definition } int main() { init(); // Initialization init(); // Initialization while( running() ) // Testing while( running() ) // Testing { glClear( GL_COLOR_BUFFER_BIT ); glClear( GL_COLOR_BUFFER_BIT ); glRotatef( 0.1, 0.4, -0.2, 0.7); // We will keep this rotation, because It will be necessary for other tasks glRotatef( 0.1, 0.4, -0.2, 0.7); // We will keep this rotation, because It will be necessary for other tasks // single frame drawing // single frame drawing // // glfwSwapBuffers(); glfwSwapBuffers(); } finit(); // Termination finit(); // Termination return 0; return 0;}

18. Task 5:OpenGL primitives – points, lines, triangles, squares, polygons glBegin(GLenum mode); …. // list of vertices and colors glEnd();Parameters Mode - Specifies the primitive or primitives that will be created from vertices presented between glBegin and the subsequent glEnd. Ten symbolic constants are accepted:GL_POINTS,GL_LINES,GL_LINE_STRIP,GL_LINE_LOOP,GL_TRIANGLES,GL_TRIANGLE_STRIP,GL_TRIANGLE_FAN,GL_QUADS, GL_QUAD_STRIP, and GL_POLYGON. More readings: http://www.opengl.org/sdk/docs/man2/xhtml/glBegin.xml http://www.opengl.org/sdk/docs/man2/xhtml/glBegin.xml

19. Vertices 2D void glVertex2i(GLint x, GLint y); void glVertex2f(GLfloat x, GLfloat y); 3D void glVertex3i(GLint x, GLint y, GLint z); void glVertex3f(GLfloat x, GLfloat y, GLfloat z);

20. I hope that you have no eye problem and will be able to see the result on the screen without magnifier I hope that you have no eye problem and will be able to see the result on the screen without magnifier

21. Color //integer values in range [0;255] void glColor3i(GLint red, GLint green, GLint blue); //floating point values in range [0.0; 1.0] void glColor3f(GLfloat red, GLfloat green, GLfloat blue);

22. 2D Points glBegin(GL_POINTS); glVertex2f(-.6,1.); glVertex2f(-.6,.6); glVertex2f(-.2,.6); glVertex2f(-.2,-.6); glVertex2f(-.6,-.6); glVertex2f(-.6,-1.); glVertex2f(.6,-1.); glVertex2f(.6,-.6); glVertex2f(.2,-.6); glVertex2f(.2,.6); glVertex2f(.6,.6); glVertex2f(.6,1.); glEnd(); (-1,-1)(1,-1) (1,1) (-1,1)

23. 2D Lines glBegin(GL_LINES); glVertex2f(-.6,1.); glVertex2f(-.6,.6); glVertex2f(-.2,.6); glVertex2f(-.2,-.6); glVertex2f(-.6,-.6); glVertex2f(-.6,-1.); glVertex2f(.6,-1.); glVertex2f(.6,-.6); glVertex2f(.2,-.6); glVertex2f(.2,.6); glVertex2f(.6,.6); glVertex2f(.6,1.); glEnd(); (-1,-1)(1,-1) (1,1) (-1,1)

24. Line Strip glBegin(GL_LINE_STRIP); glVertex2f(-.6,1.); glVertex2f(-.6,.6); glVertex2f(-.2,.6); glVertex2f(-.2,-.6); glVertex2f(-.6,-.6); glVertex2f(-.6,-1.); glVertex2f(.6,-1.); glVertex2f(.6,-.6); glVertex2f(.2,-.6); glVertex2f(.2,.6); glVertex2f(.6,.6); glVertex2f(.6,1.); glEnd(); (-1,-1)(1,-1) (1,1) (-1,1)

25. 2D Line Loop glBegin(GL_LINE_LOOP); glVertex2f(-.6,1.); glVertex2f(-.6,.6); glVertex2f(-.2,.6); glVertex2f(-.2,-.6); glVertex2f(-.6,-.6); glVertex2f(-.6,-1.); glVertex2f(.6,-1.); glVertex2f(.6,-.6); glVertex2f(.2,-.6); glVertex2f(.2,.6); glVertex2f(.6,.6); glVertex2f(.6,1.); glEnd(); (-1,-1)(1,-1) (1,1) (-1,1)

26. 2D Polygon glBegin(GL_POLYGON); glVertex2f(-.6,1.); glVertex2f(-.6,.6); glVertex2f(-.2,.6); glVertex2f(-.2,-.6); glVertex2f(-.6,-.6); glVertex2f(-.6,-1.); glVertex2f(.6,-1.); glVertex2f(.6,-.6); glVertex2f(.2,-.6); glVertex2f(.2,.6); glVertex2f(.6,.6); glVertex2f(.6,1.); glEnd(); (-1,-1)(1,-1) (1,1) (-1,1) OpenGL only supports convex polygons (and really only triangles)

27. 2D Quads glBegin(GL_QUADS); glVertex2f(-.6,1.); glVertex2f(-.6,.6); glVertex2f(-.2,.6); glVertex2f(-.2,-.6); glVertex2f(-.6,-.6); glVertex2f(-.6,-1.); glVertex2f(.6,-1.); glVertex2f(.6,-.6); glVertex2f(.2,-.6); glVertex2f(.2,.6); glVertex2f(.6,.6); glVertex2f(.6,1.); glEnd(); (-1,-1)(1,-1) (1,1) (-1,1)

28. 2D Quads glBegin(GL_QUADS); glVertex2f(-.6,1.); glVertex2f(-.6,.6); glVertex2f(-.6,-.6); glVertex2f(-.6,-1.); glVertex2f(.6,-1.); glVertex2f(.6,-.6); glEnd(); glVertex2f(-.2,.6); glVertex2f(-.2,-.6); glVertex2f(.2,-.6); glVertex2f(.2,.6); glVertex2f(.6,.6); glVertex2f(.6,1.);

29. 2D Quads glBegin(GL_QUADS); glVertex2f(-.6,1.); glVertex2f(-.6,.6); glVertex2f(.6,.6); glVertex2f(.6,1.); glVertex2f(-.6,-.6); glVertex2f(-.6,-1.); glVertex2f(.6,-1.); glVertex2f(.6,-.6); glVertex2f(-.2,.6); glVertex2f(-.2,-.6); glVertex2f(.2,-.6); glVertex2f(.2,.6); glEnd(); (-1,1) (-1,-1)(1,-1) (1,1) (-1,1) Lines should never pass through a vertex.

30. 2D Triangles glBegin(GL_TRIANGLES); glVertex2f(-.6,1.); glVertex2f(-.6,.6); glVertex2f(-.2,.6); glVertex2f(-.2,-.6); glVertex2f(-.6,-.6); glVertex2f(-.6,-1.); glVertex2f(.6,-1.); glVertex2f(.6,-.6); glVertex2f(.2,-.6); glVertex2f(.2,.6); glVertex2f(.6,.6); glVertex2f(.6,1.); glEnd(); (-1,-1)(1,-1) (1,1) (-1,1)

31. 2D Triangles glBegin(GL_TRIANGLES); glVertex2f(-.6,1.); glVertex2f(-.6,.6); glVertex2f(-.2,.6); glVertex2f(-.6,1.); glVertex2f(-.2,.6); glVertex2f(.6,1.); glVertex2f(-.2,.6); glVertex2f(.2,.6); glVertex2f(.6,1.); glVertex2f(.2,.6); glVertex2f(.6,.6); glVertex2f(.6,1.); … glEnd(); (-1,-1)(1,-1) (1,1) (-1,1) Lines should never pass through a vertex.

32. 2D Triangle Strip glBegin(GL_TRIANGLE_STRIP); glVertex2f(-.6,1.); glVertex2f(-.6,.6); glVertex2f(-.2,.6); glVertex2f(-.2,-.6); glVertex2f(-.6,-.6); glVertex2f(-.6,-1.); glVertex2f(.6,-1.); glVertex2f(.6,-.6); glVertex2f(.2,-.6); glVertex2f(.2,.6); glVertex2f(.6,.6); glVertex2f(.6,1.); glEnd(); (-1,-1)(1,-1) (1,1) (-1,1)

33. 2D Triangle Strip glBegin(GL_TRIANGLE_STRIP); glVertex2f(-.6,1.); glVertex2f(.6,1.); glVertex2f(-.2,.6); glVertex2f(.2,.6); glVertex2f(-.2,-.6); glVertex2f(.2,-.6); glVertex2f(.6,-1.); glVertex2f(.6,-.6); glEnd(); … (-1,-1)(1,-1) (1,1) (-1,1) First two vertices prime the pump, then every new vertex creates a triangle connecting it to the previous two vertices

34. 2D Triangle Fan glBegin(GL_TRIANGLE_FAN); glVertex2f(-.2,.6); glVertex2f(-.6,.6); glVertex2f(-.6,1.); glVertex2f(.6,1.); glVertex2f(.2,.6); glVertex2f(.2,-.6); glVertex2f(-.2,-.6); glEnd(); … (-1,-1)(1,-1) (1,1) (-1,1) First two vertices prime the pump, then every new vertex creates a triangle connecting it to the previous vertex and the first vertex

35. Assigning Color glColor3f(0,0,1); glBegin(GL_POLYGON); glVertex2f(-1,1); glVertex2f(-1,-1); glVertex2f(1,-1); glEnd(); glColor3f(1,0,0); glBegin(GL_POLYGON); glVertex2f(-1,1); glVertex2f(-1,-1); glVertex2f(1,-1); glEnd(); glColor3f(0,0,0); glBegin(GL_LINE_LOOP); glVertex2f(-1,1); glVertex2f(-1,-1); glVertex2f(1,-1); glEnd(); glBegin(GL_POLYGON); glColor3f(0,1,0); glVertex2f(-1,1); glColor3f(0,0,1); glVertex2f(-1,-1); glColor3f(1,0,0); glVertex2f(1,-1); glEnd();

36. Paying with 3D coordinates: –Draw 8 vertices of a cube –Center point (0,0,0) –Cube size = 2 Task 6:Cube vertices

37. Result

38. Task 7:Cube edges Make some changes in Task 6 such that: –Draw cube edges –Each edge is drawn as separate line

39. Result

40. Task 7:Cube edges – v2 Make some changes in Task 7 such that: –Draws a connected group of line segments from the first vertex to the last, then back to the first.

41. Task 8: Cube Size Parameterization Write function to –Draw a cube with size а –In loop make a cube size to change randomly in predefined ranges

42. Task 9:Concentric Cubes Draw Concentric Cubes –Use a loop to draw 10 cubes with the same center point and different sizes

43. Result

44. Task 10: Cube Center Parameterization Add new parameter to the function for drawing a cube –Coordinates of the center point –Test this function by drawing 3 cubes next to each other

45. Result

46. Task 10: Cube Center Parameterization - v2 Draw –Big size cube and next to each of its sides 10 smaller cubes with decreasing sizes

47. Result

48. Questions?