COS 397 Computer Graphics• Assoc. Prof. Svetla Boytcheva• AUBG• 2013

COS 397 Computer GraphicsPractical Session №1

Introduction to OpenGL, GLFW and CG

OutlineTask 1: CodeBlock, GLFW & OpenGL testing Task 2: Full Screen modeTask 3: Graphical Application StructureTask 4: Alternative Structure of Graphical ApplicationTask 5: OpneGL primitives – points, lines,

triangles, squares, polygons Task 6: Cube verticesTask 7: Cube edgesTask 8: Cube Size ParameterizationTask 9: Concentric CubesTask 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

http://www.opengl.org/registry/http://www.glprogramming.com/red/

Alternative software– MESA, FreeGLUT, GLUT, Notepad, C compiler

Software

Task №1 CodeBlock, GLFW & OpenGL Testing

Let’s Begin:– Code::Blocks – GNU GCC Compiler– GLFW 2.7.7 32-bit

Task №1Create 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 modeGLFW functions

– GLFW Reference Manualhttp://www.glfw.org/GLFWUsersGuide277.pdfsections 3.1.1, 3.1.2 и 3.2.1

Changes in glfwOpenWindow()– Parameter GLFW_FULLSCREEN

Task № 3:Graphical Application Structure

Minimal Skeleton of GLFW code#include <GL/glfw.h>

int main(){ glfwInit(); glfwOpenWindow(512,512,0,0,0,0,0,0,GLFW_WINDOW); while(…) { //Using OpenGL, GLU, GLFW functions } glfwTerminate(); 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 ofMinimal 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 <GL/glfw.h>

bool running() { // definition }void init() { // definition }void finit() { // definition }

int main(){ init(); // Initialization

while( running() ) // Testing { 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

// single frame drawing// <Write your code here ….>

glfwSwapBuffers(); }

finit(); // Termination return 0;}

Task 5: OpenGL primitives – points, lines, triangles, squares, polygons

glBegin(GLenum mode);…. // list of vertices and colorsglEnd();

ParametersMode - 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

Vertices2Dvoid glVertex2i(GLint x, GLint y);void glVertex2f(GLfloat x, GLfloat y);

3Dvoid 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

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 PointsglBegin(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 LinesglBegin(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 StripglBegin(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 LoopglBegin(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 PolygonglBegin(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 QuadsglBegin(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 QuadsglBegin(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 QuadsglBegin(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 TrianglesglBegin(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 TrianglesglBegin(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 StripglBegin(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 StripglBegin(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 triangleconnecting it to the previous two vertices

2D Triangle FanglBegin(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 triangleconnecting it to the previous vertex andthe 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 edgesMake some changes in Task 6 such that:

– Draw cube edges– Each edge is drawn as separate line

Result

Task 7:Cube edges – v2Make 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 CubesDraw 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?