Lecture 7:
OpenGL
Input and Interaction
Todays lecture
•What is OpenGL?
•How does it work?
– Primitives: Points, vertices, lines, polygons
– Input and interaction
•Code examples
Common primitives in OpenGL Input devices
OpenGL
• Open Graphics Library
• API for drawing 2D and 3D graphics
• Introduced in 1992
• Version 4.3 released in 2012
• Platform independent (UNIX, Windows, Mac OS…)
• Often hardware supported in graphics cards
• Language binding to C, C++, Java, Fortran, Python,
Perl,...
Toolkits
• OpenGL is a “low level” graphics library
• GLU (OpenGL Utility Library)
– Support for higher level graphics, such as
spheres, cylinders, NURBS, etc.
– Delivered with OpenGL
– Methods begin with glu, e.g.
gluSphere(…);
gluLookAt(…);
Toolkits
• GLUT (OpenGL Utility Toolkit)
– Simplifies window handling
– User interface functions
– Available from opengl.org
– Methods begin with glut, e.g.
glutInitWindowSize( 700, 700 );
• GLEW (OpenGL Extension Wrangler Library)
– Facilitates usage of OpenGL Extensions
– (http://www.opengl.org/registry/)
Mesa (http://www.mesa3d.org/)
• Mesa is a fully open source 3-D graphics library
with an API which is very similar to that of
OpenGL.
• You can consider Mesa “to be OpenGL”;
you can use OpenGL documentation, for
example.
OpenGL advantages
• Industry Standard
• Stable
– Well controlled specification
– Backward compatibility
• Reliable and portable
– Consistent visual display results
OpenGL advantages
• Evolving
– Extension mechanism
(http://www.opengl.org/registry/)
• Scalable
– Run on systems ranging from cell phones and
PDA:s to PCs, workstations, and
supercomputers
• Documentation
– Numerous books, web material, and sample
code is readily available
– http://www.opengl.org/documentation/red_book/
State machine
• OpenGL is designed as a state machine
• Inputs geometric primitives, outputs
bitmaps
• The state machine converts the inputs to
an output image
• The result depends on the current state
• Examples of states: Colors, shading,
texture,...
The OpenGL Machine
http://www.opengl.org
Primitives in OpenGL
• Primitives are “basic building blocks” for
graphics in OpenGL.
• Some primitive types
– GL_POINTS
– GL_LINES (Used in Lab 1!)
– GL_LINESTRIP
– GL_TRIANGLES
– GL_QUADS
– GL_POLYGON
Complex shapes can
be built by using many primitives!
Primitives in OpenGL
•Primitive defining statements all starts with
glBegin(<primitive_type>) and ends with glEnd()
•Vertices are defined using glVertex*()
•where * can be 2f, 2d, 3f, 3d, ...
•Ex.: void glVertex2f( GLfloat vx, GLfloat vy );
•glVertex2fv(GLfloat *v) (pointer to array)
•GLfloat typedefined as float (32 bit)
•GLdouble typedefined as double (64 bit)
•Colors, normals, texture coordinates can be
specified for each vertex
Primitives in OpenGL
Primitives in OpenGL
Primitives in OpenGL
GL_LINES
glBegin(GL_LINES);
glVertex2f(-0.5,-0.5); // 1
glVertex2f( 0.5,-0.5); // 2
glVertex2f( 0.5, 0.5); // 3
glVertex2f(-0.5, 0.5); // 4
glEnd();
GL_LINE_STRIP
glBegin(GL_LINE_STRIP);
glVertex2f(-0.5,-0.5); // 1
glVertex2f( 0.5,-0.5); // 2
glVertex2f( 0.5, 0.5); // 3
glVertex2f(-0.5, 0.5); // 4
glEnd();
GL_LINE_LOOP
glBegin(GL_LINE_LOOP);
glVertex2f(-0.5,-0.5); // 1
glVertex2f( 0.5,-0.5); // 2
glVertex2f( 0.5, 0.5); // 3
glVertex2f(-0.5, 0.5); // 4
glEnd();
GL_TRIANGLES
glBegin(GL_TRIANGLES);
glVertex3f(-0.5,-0.5,0.0); // 1
glVertex3f(0.5,-0.5,0.0); // 2
glVertex3f(0.25, 0.5,0.0); // 3
glVertex3f(-0.5, 1.25, 0.0); // 4
glVertex3f(0.5, 1.25, 0.0); // 5
glVertex3f(0.25, 0.75, 0.0); // 6
glEnd();
GL_TRIANGLE_STRIP
glBegin(GL_TRIANGLE_STRIP);
glVertex3f(-0.5,-0.5,0.0); // 1
glVertex3f(0.5,-0.5,0.0); // 2
glVertex3f(0.25, 0.5,0.0); // 3
glVertex3f(0.5, 0.75, 0.0); // 4
glEnd();
Front and back rendering
• Each polygon has two sides, front and back
• OpenGL can render the two differently
• The ordering of vertices determines which is
the front side:
– By default, when looking at the front side, the
vertices go counterclockwise (GL_CCW)
– This is basically the right-hand rule
– You can change this with glFrontFace(GL_CW);
// culling
glEnable(GL_CULL_FACE);
glCullFace(GL_BACK);
Color
glColor3f(1.0,0.0,0.0); // red
glBegin(GL_TRIANGLES);
glVertex3f(…);
…
glEnd();
Color per vertex
glBegin(GL_TRIANGLES);
glColor3f(…);
glVertex3f(…);
glColor3f(…);
glVertex3f(…);
…
glEnd();
A very simple program (Primitives.cpp)
#include <GL/glut.h>
void initGLUT( int &argc, char **argv) {
glutInit( &argc,argv );
glutInitDisplayMode(GLUT_SINGLE | GLUT_RGB);
glutInitWindowSize( 700, 700 );
glutInitWindowPosition( 100, 100 );
glutCreateWindow( “My Program” );
}
24
Primitives.cpp
void initGL() {
glClearColor( 0.0, 0.0, 0.0, 0.0 );
glMatrixMode( GL_PROJECTION );
glLoadIdentity();
glOrtho(0.0, 1.0, 0.0, 1.0, -1.0, 1.0 );
glMatrixMode ( GL_MODELVIEW );
}
Could use gluPerspective(…), or gluLookAt(…) instead!
25
Primitives.cpp
void draw() {
float point2[2] = {0.5, 0.75};
glClear( GL_COLOR_BUFFER_BIT );
glColor3f( 1.0, 1.0, 1.0 );
glBegin( GL_POLYGON );
glVertex2f( 0.25, 0.25 );
glVertex2f( 0.75, 0.5 );
glVertex2fv( point2 );
glEnd();
glFlush();
}
26
Primitives.cpp
int main(int argc, char **argv) {
initGLUT(argc, argv);
initGL();
// Set the display callback
glutDisplayFunc( draw );
//Start the GLUT main event loop.
glutMainLoop();
return 0;
}
27
Primitives.cpp
Coding time!
28
Input and interaction
– Event driven: CPU waits on the device
before it does anything
– Examples:
• keyboard
• Mouse
• Joystick
Callback functions
• Used for input and interaction
• The user submits a pointer to a function
that should be called when the
corresponding event occurs
• GLUT provides an easy-to-use interface
30
Callback functions
glutMouseFunc(function); // click mouse
glutMotionFunc(function); // move mouse
glutPassiveMotionFunc(function); // no button
glutReshapeFunc(function); // window resize
glutKeyboardFunc(function); // keyboard
glutSpecialFunc(function); // arrows, pgup
glutJoystickFunc(function); // joystick
glutIdleFunc(function); // animation
glutDisplayFunc(function); // draw primitives
31
Keyboard interaction
int main(int argc, char **argv) {
initGLUT(argc, argv);
initGL();
//Set the display callback
glutDisplayFunc(draw);
//Set the keyboard callback
glutKeyboardFunc(keyboard);
//Start the GLUT main event loop.
glutMainLoop();
return 0;
}
32
Keyboard interaction
//keyboard callback
void keyboard(unsigned char key, int x, int y) {
switch(key){
case 'r':
r=1.0; g=0.0; b=0.0;
break;
case 'g':
r=0.0; g=1.0; b=0.0;
break;
}
glutPostRedisplay();
}
33
In the display function
void draw() {
...
//draw a polygon
glColor3f( r, g, b );
glBegin( GL_POLYGON );
glVertex2f( 0.25, 0.25 );
glVertex2f( 0.75, 0.5 );
glVertex2fv( point2 );
glEnd();
...
}
34
Keyboard interaction
'r' Coding time! 'g'
35
Mouse interaction
int main(int argc, char **argv) {
...
//Set the keyboard callback
glutKeyboardFunc(keyboard);
glutMouseFunc(mouse);
glutPassiveMotionFunc(passiveMotion);
glutMotionFunc(motion);
...
}
36
Mouse interaction
// mouse callback
void mouse(int button, int state, int x, int y) {
if( button == GLUT_LEFT_BUTTON && state == GLUT_DOWN ){
printf(“Left mouse button pressed“);
}
}
37
Mouse interaction
// mouse motion callback
void motion(int x, int y) {
pos_x=x/WINDOW_SIZE_X;
pos_y=1-(y/WINDOW_SIZE_Y);
glutPostRedisplay();
}
38
In the display function
void draw() {
...
//draw a point
glColor3f( 0.8, 0.8, 0.2 );
glPointSize(10.0);
glBegin( GL_POINTS );
glVertex2f( pos_x, pos_y );
glEnd();
...
}
39
Mouse interaction
Coding time!
40
Idle tasks
int main(int argc, char **argv) {
...
glutKeyboardFunc(keyboard);
glutMouseFunc(mouse);
glutPassiveMotionFunc(motion);
glutIdleFunc(idle);
...
}
41
Idle tasks
// idle callback
void idle() {
t+=1;
glutPostRedisplay();
}
42
Display function
void draw() {
...
glColor3f( 0.5+0.5*sin(0.001*t),
0.3,
0.5+0.5*cos(0.001*t));
//draw a polygon
glBegin( GL_POLYGON );
glVertex2f( 0.25, 0.25 );
...
glEnd();
...
} Coding time!
43
OpenGL in GUI applications
• Basic keyboard and mouse interaction
sufficient for small applications.
• Often, we need more (menus, buttons,
sliders,... )
44
GLUI
(http://www.cs.unc.edu/~rademach/glui/)
•Minimal library for GUI:s, really easy to use
•All rendering done with OpenGL
•Good for simple applications
•Limited functionality
WXWidgets
(www.wxwidgets.org)
• Multi-platform
(Windows, OS X, Linux)
• Open Source
• Large feature set
• OpenGL supported
through wxGLCanvas
class.
Qt (http://qt.nokia.com/)
• Multi-platform (Windows,
OS X, Linux)
• Open Source (since 2008)
• Large feature set
• OpenGL support.
Questions so far…?
Interaction with more degrees
of freedom
Haptic interfaces provice multiple degrees of freedom
and force feedback. Enables exciting interaction
possibilities…
Cybergrasp
