NoufNaief.net TA: Nouf Al-harbi

What’s Computer Graphics..? 2 Computer Image Description Computer Graphics

How we look at an image! Color: B/W or color (RGB) Frame: length, width Size: length, width, area, height and volume if 3D Type: Static or animated Content: The scene: Objects, characters Background/ Foreground lighting, shading Textures Viewing angle: camera location

How The computer see an image!  The computer generally sees an image as a set of square points or PIXELS (Picture Elements)  Each Pixel having a defined RGB color  These pixels and their colors are processed to extract information about the image content

COMPUTER GRAPHICS LAB OBJECTIVE  To give you a good practical experience in programming graphics using C++ and OpenGL Introductiom to OpenGL 5

LAB MARKS Introductiom to OpenGL 6

LAB MATERIALS.. NoufNaief.net Introductiom to OpenGL 7

COMPUTER GRAPHICS LAB 1 Introduction to OpenGL

objectives By the end of this lab you will be able to know : What’s OpenGl..? What does it do ? And what doesn’t it do..? What’s GLUT and why do we use it..? Write the 1 st OpenGL program Introductiom to OpenGL 9

What is OpenGL? OpenGL stands of Open Graphical Library It is a software interface to graphics hardware. It consists of about 120 distinct commands to specify the objects and operations needed to produce interactive 3D applications It is developed by many companies and it is free to use You can develop OpenGL-applications without Licensing OpenGL is a system-independent interface it can work with any programming language and any operating system Introductiom to OpenGL 10

What I can do with OpenGL..? This picture may give you an idea of the kinds of things you can do with the OpenGL graphics system This picture is the cover of the ‘Red Book’: OpenGl Programming user guide Introductiom to OpenGL 11

What OpenGL doesn’t do ? Introductiom to OpenGL 12 With OpenGL you must OpenGL doesn’t Work through whatever windowing system controls the particular hardware you're using. GLUT can be used. OpenGL is window system independent  it doesn’t include commands for performing windowing tasks obtaining user input Build up your desired model from a small set of geometric primitive - points, lines, and polygons. OpenGL doesn’t provide commands that allowing you to specify complicated shapes Automobiles parts of the body airplanes

THE SUPPORT LIBRARIES GLU and GLUT Introductiom to OpenGL 13

GLUT The OpenGL Utility Toolkit (GLUT) is a Programming interface It implements a simple windowing application programming interface (API) for OpenGL The toolkit supports the following functionality : Create Display windows. Interactive with input devices and detect user input. An “idle” routine and timers. Utility routines to generate various solid and wire frame objects. Introduction to OpenGL 14

GLU GLU: OpenGL Utility Library provides functions for drawing more complex primitives than those of OpenGL such as curves and surfaces Introductiom to OpenGL 15

OpenGL Basics Function names: Begins with gl. Each component word starts with capital letter. Examples: glClear( ) glClearColor( ) Introductiom to OpenGL 16

OpenGL Basics Basic Constants: Starts with GL Component words are written in Capital letters and separated by underscore ( _ ). Examples: GL_COLOR_BUFFER_BIT GL_POINTS GL_LINES Introductiom to OpenGL 17

OpenGL Basics All the functions in GLUT starts with glut All the functions in GLU starts with glu Introductiom to OpenGL 18

your first OpenGL Program Preparing the graphics work environment We will use VC++ You need to include t hese files to your computer Introductiom to OpenGL 19 Where to put these files? Microsoft Visual Studio/VC98/Lib opengl32.lib glu32.lib glaux.lib glut32.lib Library files Microsoft Visual Studio/VC98/Include/GL Note: all header files are in folder GL gl.h glu.h glaux.h glut.h Header files Windows/system32 Opengl32.dll Glu32.dll Glut32.dll DLL files

your first OpenGL Program Generate a square on a solid background Open VC++ New  source file Write the following code Compile and build it 20 #include void display() { glClear(GL_COLOR_BUFFER_BIT); glBegin(GL_POLYGON); glVertex2f(-0.5, -0.5); glVertex2f(-0.5, 0.5); glVertex2f(0.5, 0.5); glVertex2f(0.5, -0.5); glEnd(); glFlush(); } int main(int argc, char** argv) { glutInit(&argc,argv); glutCreateWindow("CS447 First OGL Program"); glutDisplayFunc(display); glutMainLoop(); }

your first OpenGL Program You have to link used libraries to your project Select Project/Settings from the main menu. A dialog box appears, select the Link tab. Add the following files to the Object/library modules: opengl32.lib glut32.lib glu32.lib Introductiom to OpenGL 21

your first OpenGL Program To write OpenGL program, we must include these files glut. h glu. h gl. h #include should automatically include the others Introductiom to OpenGL 22 #include 1

your first OpenGL Program T here are 2 functions in our program Display function Main function Each of them calls a number of OpenGL/glut functions Introductiom to OpenGL 23 #include void display() { glClear(GL_COLOR_BUFFER_BIT); glBegin(GL_POLYGON); glVertex2f(-0.5, -0.5); glVertex2f(-0.5, 0.5); glVertex2f(0.5, 0.5); glVertex2f(0.5, -0.5); glEnd(); glFlush(); } int main(int argc, char** argv) { glutInit(&argc,argv); glutCreateWindow("CS447 First OGL Program"); glutDisplayFunc(display); glutMainLoop(); }

Main Function Commands Initializes GLUT should be called before any OpenGL command takes the arguments from main() Introductiom to OpenGL 24 int main(int argc, char** argv) { glutInit(&argc,argv); glutCreateWindow("CS447 First OGL Program"); glutDisplayFunc(display); glutMainLoop(); }

Main Function Commands  Creates a window on the screen with the title  Parameters: Title of the window would be created  Returns an integer that can be used to refer to the window in multi- window situations. Introductiom to OpenGL 25 int main(int argc, char** argv) { glutInit(&argc,argv); glutCreateWindow("CS447 First OGL Program"); glutDisplayFunc(display); glutMainLoop(); }

Main Function Commands  The function display() is called each time there is a display callback Parameters: A function that contains what we want to draw in the screen Introductiom to OpenGL 26 int main(int argc, char** argv) { glutInit(&argc,argv); glutCreateWindow("CS447 First OGL Program"); glutDisplayFunc(display); glutMainLoop(); } In order to respond to the input event, the application must provide a function – known as a callback function – to handle the event; OpenGL automatically calls the application’s function, passing it the event data.

Main Function Commands Causes the program to enter an event-processing loop Once called, this routine will never return. It will call as necessary any callbacks that have been registered. This statement should be the last one in the main() function Introductiom to OpenGL 27 int main(int argc, char** argv) { glutInit(&argc,argv); glutCreateWindow("CS447 First OGL Program"); glutDisplayFunc(display); glutMainLoop(); }

Display Function Commands called by GLUT when the window is redrawn. we should specify what we want to output to screen. Introductiom to OpenGL 28 void display() { glClear(GL_COLOR_BUFFER_BIT); glBegin(GL_POLYGON); glVertex2f(-0.5, -0.5); glVertex2f(-0.5, 0.5); glVertex2f(0.5, 0.5); glVertex2f(0.5, -0.5); glEnd(); glFlush(); }

Display Function Commands clears one or more of OpenGL’s buffers. When glClear() is called, each pixel in the buffer is set to the current clear color, which is set to black by default. Parameters : GL_COLOR _BUFFER_BIT: frame buffer, which holds the pixels which will be copied to the window Introductiom to OpenGL 29 void display() { glClear(GL_COLOR_BUFFER_BIT); glBegin(GL_POLYGON); glVertex2f(-0.5, -0.5); glVertex2f(-0.5, 0.5); glVertex2f(0.5, 0.5); glVertex2f(0.5, -0.5); glEnd(); glFlush(); } OpenGL doesn’t draw its graphics directly to the window. It actually draws into a data structure (an array of pixels) inside OpenGL called the frame-buffer. Periodically, OpenGL copies the pixels in the frame buffer into the window.

Display Function Commands Specifies the beginning of an object of type mode Modes include: GL_POINTS GL_LINES GL_POLYGON, …etc. Introductiom to OpenGL 30 void display() { glClear(GL_COLOR_BUFFER_BIT); glBegin(GL_POLYGON); glVertex2f(-0.5, -0.5); glVertex2f(-0.5, 0.5); glVertex2f(0.5, 0.5); glVertex2f(0.5, -0.5); glEnd(); glFlush(); }

Display Function Commands glVertex{234}{sifd}(X_coordinate, Y_coordinate,...) {234} Specifies the location of a vertex in two, three, or four dimensions with the types short (s), int (i), float (f), or double (d) Introductiom to OpenGL 31 void display() { glClear(GL_COLOR_BUFFER_BIT); glBegin(GL_POLYGON); glVertex2f(-0.5, -0.5); glVertex2f(-0.5, 0.5); glVertex2f(0.5, 0.5); glVertex2f(0.5, -0.5); glEnd(); glFlush(); }

Introductiom to OpenGL 32

Display Function Commands Specifies the end of a list of vertices. Introductiom to OpenGL 33 void display() { glClear(GL_COLOR_BUFFER_BIT); glBegin(GL_POLYGON); glVertex2f(-0.5, -0.5); glVertex2f(-0.5, 0.5); glVertex2f(0.5, 0.5); glVertex2f(0.5, -0.5); glEnd(); glFlush(); }

Display Function Commands instructs OpenGL to make sure the screen is up to date. it causes the contents of any internal OpenGL buffers are “flushed” to the screen Introductiom to OpenGL 34 void display() { glClear(GL_COLOR_BUFFER_BIT); glBegin(GL_POLYGON); glVertex2f(-0.5, -0.5); glVertex2f(-0.5, 0.5); glVertex2f(0.5, 0.5); glVertex2f(0.5, -0.5); glEnd(); glFlush(); }

REFERENCES: Materials of this lab are prepared using:  An Introduction to Graphics Programming with OpenGL by : Toby Howard, School of Computer Science, University of Manchester  Lighthouse3d:  OpenGL Programming Guide 'The Red Book’  Computer Graphics Lab -1 st semester – by : Ins. Ruwaida Al-harbi & Ins. Nouf Al-harbi  Computer Graphics Lectures – 1 st semester by Dr.Ahmed Ghali Introductiom to OpenGL 35

Introductiom to OpenGL 36