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

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

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

Required software –OpenGL, GLU, GLFW, GCC –Code::Blocks –Information about OpenGL 1.x Alternative software –MESA, FreeGLUT, GLUT, Notepad, C compiler Software

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

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

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

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

Result –Automatically generated GLFW project –Build and Run

Project Result

Task №2 Full Screen mode GLFW functions –GLFW Reference Manual sections 3.1.1, и Changes in glfwOpenWindow() – Parameter GLFW_FULLSCREEN

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;}

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

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

Alternative Structure of Minimal GLFW Application Proposed in GLFW Reference Manual

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

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;}

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:

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);

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

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);

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)

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)

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)

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)

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)

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)

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.);

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.

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)

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.

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)

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

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

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();

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

Result

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

Result

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.

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

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

Result

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

Result

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

Result

Questions?