KEMBAR78
Intro to Computer Graphics.ppt
Introduction to
Computer Graphics
with OpenGL/GLUT
What is OpenGL?
 A software interface to graphics hardware
 Graphics rendering API (Low Level)
 High-quality color images composed of
geometric and image primitives
 Window system independent
 Operating system independent
OpenGL Basics
Graphics Pipeline
 Rendering
 Typically execution of OpenGL commands
 Converting geometric/mathematical object
descriptions into frame buffer values
 OpenGL can render:
 Geometric primitives
 Lines, points, polygons, etc…
 Bitmaps and Images
 Images and geometry linked through
texture mapping
OpenGL and GLUT
 GLUT (OpenGL Utility Toolkit)
 An auxiliary library
 A portable windowing API
 Easier to show the output of your OpenGL application
 Not officially part of OpenGL
 Handles:
 Window creation,
 OS system calls
 Mouse buttons, movement, keyboard, etc…
 Callbacks
How to install GLUT?
 Download GLUT
 http://www.opengl.org/resources/libraries/glut.html
 Copy the files to following folders:
 glut.h  VC/include/gl/
 glut32.lib  VC/lib/
 glut32.dll  windows/system32/
 Header Files:
 #include <GL/glut.h>
 #include <GL/gl.h>
 Include glut automatically includes other header files
GLUT Basics
 Application Structure
 Configure and open window
 Initialize OpenGL state
 Register input callback functions
 render
 resize
 input: keyboard, mouse, etc.
 Enter event processing loop
Sample Program
#include <GL/glut.h>
#include <GL/gl.h>
void main(int argc, char** argv)
{
int mode = GLUT_RGB|GLUT_DOUBLE;
glutInitDisplayMode( mode );
glutInitWindowSize( 500,500 );
glutCreateWindow( “Simple” );
init();
glutDisplayFunc( display );
glutKeyboardFunc( key );
glutMainLoop();
}
#include <GL/glut.h>
#include <GL/gl.h>
void main(int argc, char** argv)
{
int mode = GLUT_RGB|GLUT_DOUBLE;
glutInitDisplayMode( mode );
glutInitWindowSize( 500,500 );
glutCreateWindow( “Simple” );
init();
glutDisplayFunc( display );
glutKeyboardFunc( key );
glutMainLoop();
}
Specify the display
Mode – RGB or color
Index, single or double
Buffer
Sample Program
#include <GL/glut.h>
#include <GL/gl.h>
void main(int argc, char** argv)
{
int mode = GLUT_RGB|GLUT_DOUBLE;
glutInitDisplayMode( mode );
glutInitWindowSize( 500,500 );
glutCreateWindow( “Simple” );
init();
glutDisplayFunc( display );
glutKeyboardFunc( key );
glutMainLoop();
}
Create a window
Named “simple”
with resolution
500 x 500
Sample Program
#include <GL/glut.h>
#include <GL/gl.h>
void main(int argc, char** argv)
{
int mode = GLUT_RGB|GLUT_DOUBLE;
glutInitDisplayMode( mode );
glutInitWindowSize( 500,500 );
glutCreateWindow( “Simple” );
init();
glutDisplayFunc( display );
glutKeyboardFunc( key );
glutMainLoop();
}
Your OpenGL initialization
code (Optional)
Sample Program
#include <GL/glut.h>
#include <GL/gl.h>
void main(int argc, char** argv)
{
int mode = GLUT_RGB|GLUT_DOUBLE;
glutInitDisplayMode( mode );
glutInitWindowSize( 500,500 );
glutCreateWindow( “Simple” );
init();
glutDisplayFunc( display );
glutKeyboardFunc(key);
glutMainLoop();
}
Register your call back
functions
Sample Program
#include <GL/glut.h>
#include <GL/gl.h>
int main(int argc, char** argv)
{
int mode = GLUT_RGB|GLUT_DOUBLE;
glutInitDisplayMode(mode);
glutInitWindowSize(500,500);
glutCreateWindow(“Simple”);
init();
glutDisplayFunc(display);
glutKeyboardFunc(key);
glutMainLoop();
}
glutMainLoop()
The program goes into an infinite
loop waiting for events
OpenGL Initialization
 Set up whatever state you’re going to use
 Don’t need this much detail unless working in 3D
void init( void )
{
glClearColor (0.0, 0.0, 0.0, 0.0);
glViewport(0, 0, width, height);
glMatrixMode(GL_PROJECTION);
glLoadIdentity();
glOrtho(-10, 10, -10, 10, -10, 20);
glMatrixMode(GL_MODELVIEW);
glLoadIdentity();
glEnable( GL_LIGHT0 );
glEnable( GL_LIGHTING );
glEnable( GL_DEPTH_TEST );
}
GLUT Callback functions
 Event-driven: Programs that use windows
 Input/Output
 Wait until an event happens and then execute
some pre-defined functions according to the user’s
input
 Events – key press, mouse button press and
release, window resize, etc.
 Your OpenGL program will be in infinite loop
GLUT Callback Functions
 Callback function : Routine to call when an event
happens
 Window resize or redraw
 User input (mouse, keyboard)
 Animation (render many frames)
 “Register” callbacks with GLUT
 glutDisplayFunc( my_display_func );
 glutIdleFunc( my_idle_func );
 glutKeyboardFunc( my_key_events_func );
 glutMouseFunc ( my_mouse_events_func );
Event Queue
Event queue
Keyboard
Mouse
Window
….
Mouse_callback()
{
….
{
Keypress_callback()
{
….
{
window_callback()
{
….
{
MainLoop()
Rendering Callback
 Callback function where all our drawing is done
 Every GLUT program must have a display callback
 glutDisplayFunc( my_display_func ); /* this part is in main.c */
void my_display_func (void )
{
glClear( GL_COLOR_BUFFER_BIT );
glBegin( GL_TRIANGLE );
glVertex3fv( v[0] );
glVertex3fv( v[1] );
glVertex3fv( v[2] );
glEnd();
glFlush();
}
Idle Callback
 Use for animation and continuous update
 Can use glutTimerFunc or timed callbacks for animations
 glutIdleFunc( idle );
void idle( void )
{
/* change something */
t += dt;
glutPostRedisplay();
}
User Input Callbacks
 Process user input
 glutKeyboardFunc( my_key_events );
void my_key_events (char key, int x, int y )
{
switch ( key ) {
case ‘q’ : case ‘Q’ :
exit ( EXIT_SUCCESS);
break;
case ‘r’ : case ‘R’ :
rotate = GL_TRUE;
break;
}
}
Mouse Callback
 Captures mouse press and release events
 glutMouseFunc( my_mouse );
void myMouse(int button, int state, int x, int y)
{
if (button == GLUT_LEFT_BUTTON && state ==
GLUT_DOWN)
{
…
}
}
Events in OpenGL
Event Example OpenGL Callback
Function
Keypress KeyDown
KeyUp
glutKeyboardFunc
Mouse leftButtonDown
leftButtonUp
glutMouseFunc
Motion With mouse press
Without
glutMotionFunc
glutPassiveMotionFunc
Window Moving
Resizing
glutReshapeFunc
System Idle
Timer
glutIdleFunc
glutTimerFunc
Software What to draw glutDisplayFunc
OpenGL Geometric Primitives
 The geometry is specified by vertices.
 There are ten primitive types:
Polygon Issues
OpenGL will only display polygons correctly that are
Simple: edges cannot cross
Convex: All points on line segment between two points in a
polygon are also in the polygon
Flat: all vertices are in the same plane
User program can check if above true
OpenGL will produce output if these conditions are violated
but it may not be what is desired
Triangles satisfy all conditions
That’s why we need triangulation algorithms!
OpenGL Command Format
glVertex3fv
Vertices and Primitives
 Primitives are specified using
glBegin( primType );
…
glEnd();
 primType determines how vertices are combined
GLfloat red, green, blue;
Glfloat coords[nVerts][3];
/*Initialize coords and colors somewhere in program*/
glBegin( primType );
for ( i = 0; i < nVerts; ++i ) {
glColor3f( red, green, blue );
glVertex3fv( coords[i] );
}
glEnd();
An Example
void drawParallelogram( GLfloat
color[] )
{
glBegin( GL_QUADS );
glColor3fv( color );
glVertex2f( 0.0, 0.0 );
glVertex2f( 1.0, 0.0 );
glVertex2f( 1.5, 1.118 );
glVertex2f( 0.5, 1.118 );
glEnd();
}
Vertices and Primitives
 Points, GL_POINTS
 Individual points
 Point size can be altered
 glPointSize (float size)
glBegin(GL_POINTS);
glColor3fv( color );
glVertex2f( P0.x, P0.y );
glVertex2f( P1.x, P1.y );
glVertex2f( P2.x, P2.y );
glVertex2f( P3.x, P3.y );
glVertex2f( P4.x, P4.y );
glVertex2f( P5.x, P5.y );
glVertex2f( P6.x, P6.y );
glVertex2f( P7.x, P7.y );
glEnd();
Vertices and Primitives
 Lines, GL_LINES
 Pairs of vertices interpreted as individual line segments
 Can specify line width using:
 glLineWidth (float width)
glBegin(GL_LINES);
glColor3fv( color );
glVertex2f( P0.x, P0.y );
glVertex2f( P1.x, P1.y );
glVertex2f( P2.x, P2.y );
glVertex2f( P3.x, P3.y );
glVertex2f( P4.x, P4.y );
glVertex2f( P5.x, P5.y );
glVertex2f( P6.x, P6.y );
glVertex2f( P7.x, P7.y );
glEnd();
Vertices and Primitives
 Line Strip, GL_LINE_STRIP
 series of connected line segments
Vertices and Primitives
 Line Loop, GL_LINE_LOOP
 Line strip with a segment added between last and first
vertices
Vertices and Primitives
 Polygon , GL_POLYGON
 boundary of a simple, convex polygon
Vertices and Primitives
 Triangles , GL_TRIANGLES
 triples of vertices interpreted as triangles
Vertices and Primitives
 Triangle Strip , GL_TRIANGLE_STRIP
 linked strip of triangles
v0
v2
v1
v3
v4 v5
v6
v7
Vertices and Primitives
 Triangle Fan ,
GL_TRIANGLE_FAN
 linked fan of triangles
v0
v1 v2
v3
v4
v5
Vertices and Primitives
 Quads , GL_QUADS
 quadruples of vertices interpreted as four-sided
polygons
Vertices and Primitives
 Between glBegin/ glEnd, those opengl
commands are allowed:
 glVertex*() : set vertex coordinates
 glColor*() : set current color
 glIndex*() : set current color index
 glNormal*() : set normal vector coordinates (Light.)
 glTexCoord*() : set texture coordinates (Texture)
References
1. http://www.opengl.org/documentation/spec.html
2. http://www.opengl.org/documentation/red_book_
1.0/
3. http://www.cs.rit.edu/~jdb/cg1/openGLIntro.pdf
4. http://www.ceng.metu.edu.tr/courses/ceng477/
2005/documents/recitations/opengl.ppt

Intro to Computer Graphics.ppt

  • 1.
  • 2.
    What is OpenGL? A software interface to graphics hardware  Graphics rendering API (Low Level)  High-quality color images composed of geometric and image primitives  Window system independent  Operating system independent
  • 3.
    OpenGL Basics Graphics Pipeline Rendering  Typically execution of OpenGL commands  Converting geometric/mathematical object descriptions into frame buffer values  OpenGL can render:  Geometric primitives  Lines, points, polygons, etc…  Bitmaps and Images  Images and geometry linked through texture mapping
  • 4.
    OpenGL and GLUT GLUT (OpenGL Utility Toolkit)  An auxiliary library  A portable windowing API  Easier to show the output of your OpenGL application  Not officially part of OpenGL  Handles:  Window creation,  OS system calls  Mouse buttons, movement, keyboard, etc…  Callbacks
  • 5.
    How to installGLUT?  Download GLUT  http://www.opengl.org/resources/libraries/glut.html  Copy the files to following folders:  glut.h  VC/include/gl/  glut32.lib  VC/lib/  glut32.dll  windows/system32/  Header Files:  #include <GL/glut.h>  #include <GL/gl.h>  Include glut automatically includes other header files
  • 6.
    GLUT Basics  ApplicationStructure  Configure and open window  Initialize OpenGL state  Register input callback functions  render  resize  input: keyboard, mouse, etc.  Enter event processing loop
  • 7.
    Sample Program #include <GL/glut.h> #include<GL/gl.h> void main(int argc, char** argv) { int mode = GLUT_RGB|GLUT_DOUBLE; glutInitDisplayMode( mode ); glutInitWindowSize( 500,500 ); glutCreateWindow( “Simple” ); init(); glutDisplayFunc( display ); glutKeyboardFunc( key ); glutMainLoop(); }
  • 8.
    #include <GL/glut.h> #include <GL/gl.h> voidmain(int argc, char** argv) { int mode = GLUT_RGB|GLUT_DOUBLE; glutInitDisplayMode( mode ); glutInitWindowSize( 500,500 ); glutCreateWindow( “Simple” ); init(); glutDisplayFunc( display ); glutKeyboardFunc( key ); glutMainLoop(); } Specify the display Mode – RGB or color Index, single or double Buffer Sample Program
  • 9.
    #include <GL/glut.h> #include <GL/gl.h> voidmain(int argc, char** argv) { int mode = GLUT_RGB|GLUT_DOUBLE; glutInitDisplayMode( mode ); glutInitWindowSize( 500,500 ); glutCreateWindow( “Simple” ); init(); glutDisplayFunc( display ); glutKeyboardFunc( key ); glutMainLoop(); } Create a window Named “simple” with resolution 500 x 500 Sample Program
  • 10.
    #include <GL/glut.h> #include <GL/gl.h> voidmain(int argc, char** argv) { int mode = GLUT_RGB|GLUT_DOUBLE; glutInitDisplayMode( mode ); glutInitWindowSize( 500,500 ); glutCreateWindow( “Simple” ); init(); glutDisplayFunc( display ); glutKeyboardFunc( key ); glutMainLoop(); } Your OpenGL initialization code (Optional) Sample Program
  • 11.
    #include <GL/glut.h> #include <GL/gl.h> voidmain(int argc, char** argv) { int mode = GLUT_RGB|GLUT_DOUBLE; glutInitDisplayMode( mode ); glutInitWindowSize( 500,500 ); glutCreateWindow( “Simple” ); init(); glutDisplayFunc( display ); glutKeyboardFunc(key); glutMainLoop(); } Register your call back functions Sample Program
  • 12.
    #include <GL/glut.h> #include <GL/gl.h> intmain(int argc, char** argv) { int mode = GLUT_RGB|GLUT_DOUBLE; glutInitDisplayMode(mode); glutInitWindowSize(500,500); glutCreateWindow(“Simple”); init(); glutDisplayFunc(display); glutKeyboardFunc(key); glutMainLoop(); } glutMainLoop() The program goes into an infinite loop waiting for events
  • 13.
    OpenGL Initialization  Setup whatever state you’re going to use  Don’t need this much detail unless working in 3D void init( void ) { glClearColor (0.0, 0.0, 0.0, 0.0); glViewport(0, 0, width, height); glMatrixMode(GL_PROJECTION); glLoadIdentity(); glOrtho(-10, 10, -10, 10, -10, 20); glMatrixMode(GL_MODELVIEW); glLoadIdentity(); glEnable( GL_LIGHT0 ); glEnable( GL_LIGHTING ); glEnable( GL_DEPTH_TEST ); }
  • 14.
    GLUT Callback functions Event-driven: Programs that use windows  Input/Output  Wait until an event happens and then execute some pre-defined functions according to the user’s input  Events – key press, mouse button press and release, window resize, etc.  Your OpenGL program will be in infinite loop
  • 15.
    GLUT Callback Functions Callback function : Routine to call when an event happens  Window resize or redraw  User input (mouse, keyboard)  Animation (render many frames)  “Register” callbacks with GLUT  glutDisplayFunc( my_display_func );  glutIdleFunc( my_idle_func );  glutKeyboardFunc( my_key_events_func );  glutMouseFunc ( my_mouse_events_func );
  • 16.
  • 17.
    Rendering Callback  Callbackfunction where all our drawing is done  Every GLUT program must have a display callback  glutDisplayFunc( my_display_func ); /* this part is in main.c */ void my_display_func (void ) { glClear( GL_COLOR_BUFFER_BIT ); glBegin( GL_TRIANGLE ); glVertex3fv( v[0] ); glVertex3fv( v[1] ); glVertex3fv( v[2] ); glEnd(); glFlush(); }
  • 18.
    Idle Callback  Usefor animation and continuous update  Can use glutTimerFunc or timed callbacks for animations  glutIdleFunc( idle ); void idle( void ) { /* change something */ t += dt; glutPostRedisplay(); }
  • 19.
    User Input Callbacks Process user input  glutKeyboardFunc( my_key_events ); void my_key_events (char key, int x, int y ) { switch ( key ) { case ‘q’ : case ‘Q’ : exit ( EXIT_SUCCESS); break; case ‘r’ : case ‘R’ : rotate = GL_TRUE; break; } }
  • 20.
    Mouse Callback  Capturesmouse press and release events  glutMouseFunc( my_mouse ); void myMouse(int button, int state, int x, int y) { if (button == GLUT_LEFT_BUTTON && state == GLUT_DOWN) { … } }
  • 21.
    Events in OpenGL EventExample OpenGL Callback Function Keypress KeyDown KeyUp glutKeyboardFunc Mouse leftButtonDown leftButtonUp glutMouseFunc Motion With mouse press Without glutMotionFunc glutPassiveMotionFunc Window Moving Resizing glutReshapeFunc System Idle Timer glutIdleFunc glutTimerFunc Software What to draw glutDisplayFunc
  • 22.
    OpenGL Geometric Primitives The geometry is specified by vertices.  There are ten primitive types:
  • 23.
    Polygon Issues OpenGL willonly display polygons correctly that are Simple: edges cannot cross Convex: All points on line segment between two points in a polygon are also in the polygon Flat: all vertices are in the same plane User program can check if above true OpenGL will produce output if these conditions are violated but it may not be what is desired Triangles satisfy all conditions That’s why we need triangulation algorithms!
  • 24.
  • 25.
    Vertices and Primitives Primitives are specified using glBegin( primType ); … glEnd();  primType determines how vertices are combined GLfloat red, green, blue; Glfloat coords[nVerts][3]; /*Initialize coords and colors somewhere in program*/ glBegin( primType ); for ( i = 0; i < nVerts; ++i ) { glColor3f( red, green, blue ); glVertex3fv( coords[i] ); } glEnd();
  • 26.
    An Example void drawParallelogram(GLfloat color[] ) { glBegin( GL_QUADS ); glColor3fv( color ); glVertex2f( 0.0, 0.0 ); glVertex2f( 1.0, 0.0 ); glVertex2f( 1.5, 1.118 ); glVertex2f( 0.5, 1.118 ); glEnd(); }
  • 27.
    Vertices and Primitives Points, GL_POINTS  Individual points  Point size can be altered  glPointSize (float size) glBegin(GL_POINTS); glColor3fv( color ); glVertex2f( P0.x, P0.y ); glVertex2f( P1.x, P1.y ); glVertex2f( P2.x, P2.y ); glVertex2f( P3.x, P3.y ); glVertex2f( P4.x, P4.y ); glVertex2f( P5.x, P5.y ); glVertex2f( P6.x, P6.y ); glVertex2f( P7.x, P7.y ); glEnd();
  • 28.
    Vertices and Primitives Lines, GL_LINES  Pairs of vertices interpreted as individual line segments  Can specify line width using:  glLineWidth (float width) glBegin(GL_LINES); glColor3fv( color ); glVertex2f( P0.x, P0.y ); glVertex2f( P1.x, P1.y ); glVertex2f( P2.x, P2.y ); glVertex2f( P3.x, P3.y ); glVertex2f( P4.x, P4.y ); glVertex2f( P5.x, P5.y ); glVertex2f( P6.x, P6.y ); glVertex2f( P7.x, P7.y ); glEnd();
  • 29.
    Vertices and Primitives Line Strip, GL_LINE_STRIP  series of connected line segments
  • 30.
    Vertices and Primitives Line Loop, GL_LINE_LOOP  Line strip with a segment added between last and first vertices
  • 31.
    Vertices and Primitives Polygon , GL_POLYGON  boundary of a simple, convex polygon
  • 32.
    Vertices and Primitives Triangles , GL_TRIANGLES  triples of vertices interpreted as triangles
  • 33.
    Vertices and Primitives Triangle Strip , GL_TRIANGLE_STRIP  linked strip of triangles v0 v2 v1 v3 v4 v5 v6 v7
  • 34.
    Vertices and Primitives Triangle Fan , GL_TRIANGLE_FAN  linked fan of triangles v0 v1 v2 v3 v4 v5
  • 35.
    Vertices and Primitives Quads , GL_QUADS  quadruples of vertices interpreted as four-sided polygons
  • 36.
    Vertices and Primitives Between glBegin/ glEnd, those opengl commands are allowed:  glVertex*() : set vertex coordinates  glColor*() : set current color  glIndex*() : set current color index  glNormal*() : set normal vector coordinates (Light.)  glTexCoord*() : set texture coordinates (Texture)
  • 37.
    References 1. http://www.opengl.org/documentation/spec.html 2. http://www.opengl.org/documentation/red_book_ 1.0/ 3.http://www.cs.rit.edu/~jdb/cg1/openGLIntro.pdf 4. http://www.ceng.metu.edu.tr/courses/ceng477/ 2005/documents/recitations/opengl.ppt