CENG477 Introduction to Computer Graphics Introduction to OpenGL, GLUT and GLUI.

49
CENG477 Introduction to Computer Graphics Introduction to OpenGL, GLUT and GLUI
  • date post

    21-Dec-2015
  • Category

    Documents

  • view

    244
  • download

    2

Transcript of CENG477 Introduction to Computer Graphics Introduction to OpenGL, GLUT and GLUI.

Page 1: CENG477 Introduction to Computer Graphics Introduction to OpenGL, GLUT and GLUI.

CENG477 Introduction to

Computer Graphics

Introduction to OpenGL, GLUT and GLUI

Page 2: CENG477 Introduction to Computer Graphics Introduction to OpenGL, GLUT and GLUI.

What is OpenGL?

“A software interface to graphics hardware”

(Low Level) Graphics rendering API high-quality color images composed of

geometric and image primitives window system independent operating system independent

Page 3: CENG477 Introduction to Computer Graphics Introduction to OpenGL, GLUT and GLUI.

OpenGL/GLUT/GLU/GLUI

OpenGL is the “core” library that is platform independent.

GLUT is an auxiliary library that handles window creation, OS system calls (mouse buttons, movement, keyboard, etc), callbacks.

GLU is an auxiliary library that handles a variety of graphics accessory functions such as setting up matrices for specific viewing orientations and projections, etc.

GLUI is a GUI manager for GLUT.

Page 4: CENG477 Introduction to Computer Graphics Introduction to OpenGL, GLUT and GLUI.

OpenGL Basics

Graphics Pipeline

Rendering Converting geometric/mathematical object descriptions

into frame buffer values

OpenGL can render: Geometric primitives Bitmaps and Images (Raster primitives)

Page 5: CENG477 Introduction to Computer Graphics Introduction to OpenGL, GLUT and GLUI.

Graphics Pipeline

OpenGL commands specify how each step is performed The graphics pipeline is modeled as a state machine

Each pipeline step has parameters (attributes) to be set

Page 6: CENG477 Introduction to Computer Graphics Introduction to OpenGL, GLUT and GLUI.

OpenGL as a Renderer

Geometric primitives points, lines and polygons

Image Primitives images and bitmaps separate pipeline for images and geometry

linked through texture mapping

Rendering depends on state colors, materials, light sources, etc.

Page 7: CENG477 Introduction to Computer Graphics Introduction to OpenGL, GLUT and GLUI.

Preliminaries

Header Files#include <GL/gl.h>

#include <GL/glu.h>

#include <GL/glut.h>

#include <glui.h>

Page 8: CENG477 Introduction to Computer Graphics Introduction to OpenGL, GLUT and GLUI.

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

Page 9: CENG477 Introduction to Computer Graphics Introduction to OpenGL, GLUT and GLUI.

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

Page 10: CENG477 Introduction to Computer Graphics Introduction to OpenGL, GLUT and GLUI.

#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 doubleBuffer

Sample Program

Page 11: CENG477 Introduction to Computer Graphics Introduction to OpenGL, GLUT and GLUI.

#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

Page 12: CENG477 Introduction to Computer Graphics Introduction to OpenGL, GLUT and GLUI.

#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 initializationcode (Optional)

Sample Program

Page 13: CENG477 Introduction to Computer Graphics Introduction to OpenGL, GLUT and GLUI.

#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

Page 14: CENG477 Introduction to Computer Graphics Introduction to OpenGL, GLUT and GLUI.

#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

Page 15: CENG477 Introduction to Computer Graphics Introduction to OpenGL, GLUT and GLUI.

OpenGL Initialization

Set up whatever state you’re going to use

void init( void ) {

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

}

Page 16: CENG477 Introduction to Computer Graphics Introduction to OpenGL, GLUT and GLUI.

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.

Page 17: CENG477 Introduction to Computer Graphics Introduction to OpenGL, GLUT and GLUI.

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 ); glutIdleFunc( my_idle_func ); glutKeyboardFunc( my_key_events ); glutMouseFunc ( my_mouse );

Page 18: CENG477 Introduction to Computer Graphics Introduction to OpenGL, GLUT and GLUI.

Event Queue

Event queue

Keyboard

Mouse

Window

….

Mouse_callback() {….{

Keypress_callback() {….{

window_callback() {….{

MainLoop()

Page 19: CENG477 Introduction to Computer Graphics Introduction to OpenGL, GLUT and GLUI.

Rendering Callback

Callback function where all our drawing is done

glutDisplayFunc( my_display );

void my_display (void ){glClear( GL_COLOR_BUFFER_BIT );glBegin( GL_TRIANGLE );

glVertex3fv( v[0] );glVertex3fv( v[1] );glVertex3fv( v[2] );

glEnd();}

Page 20: CENG477 Introduction to Computer Graphics Introduction to OpenGL, GLUT and GLUI.

Idle Callback

Use for animation and continuous update glutIdleFunc( idle );

void idle( void ){ t += dt;

glutPostRedisplay();

}

Page 21: CENG477 Introduction to Computer Graphics Introduction to OpenGL, GLUT and GLUI.

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;

}}

Page 22: CENG477 Introduction to Computer Graphics Introduction to OpenGL, GLUT and GLUI.

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)

{

}

}

Page 23: CENG477 Introduction to Computer Graphics Introduction to OpenGL, GLUT and GLUI.

Events in OpenGLEvent 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

Page 24: CENG477 Introduction to Computer Graphics Introduction to OpenGL, GLUT and GLUI.

OpenGL Geometric Primitives

The geometry is specified by vertices. There are ten primitive types:

Page 25: CENG477 Introduction to Computer Graphics Introduction to OpenGL, GLUT and GLUI.

OpenGL Command Format

Page 26: CENG477 Introduction to Computer Graphics Introduction to OpenGL, GLUT and GLUI.

Vertices and Primitives

Primitives are specified usingglBegin( primType );…glEnd();

primType determines how vertices are combined

GLfloat red, green, blue;Glfloat coords[3];glBegin( primType );for ( i = 0; i < nVerts; ++i ) { glColor3f( red, green, blue ); glVertex3fv( coords );}glEnd();

Page 27: CENG477 Introduction to Computer Graphics Introduction to OpenGL, GLUT and GLUI.

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

}

Page 28: CENG477 Introduction to Computer Graphics Introduction to OpenGL, GLUT and GLUI.

Vertices and Primitives

Points, GL_POINTS individual points

Page 29: CENG477 Introduction to Computer Graphics Introduction to OpenGL, GLUT and GLUI.

Vertices and Primitives

Lines, GL_LINES pairs of vertices interpreted as individual line

segments

Page 30: CENG477 Introduction to Computer Graphics Introduction to OpenGL, GLUT and GLUI.

Vertices and Primitives

Line Strip, GL_LINE_STRIP series of connected line segments

Page 31: CENG477 Introduction to Computer Graphics Introduction to OpenGL, GLUT and GLUI.

Vertices and Primitives

Line Loop, GL_LINE_LOOP Line strip with a segment added between last and first

vertices

Page 32: CENG477 Introduction to Computer Graphics Introduction to OpenGL, GLUT and GLUI.

Vertices and Primitives

Polygon , GL_POLYGON boundary of a simple, convex polygon

Page 33: CENG477 Introduction to Computer Graphics Introduction to OpenGL, GLUT and GLUI.

Vertices and Primitives

Triangles , GL_TRIANGLES triples of vertices interpreted as triangles

Page 34: CENG477 Introduction to Computer Graphics Introduction to OpenGL, GLUT and GLUI.

Vertices and Primitives

Triangle Strip , GL_TRIANGLE_STRIP linked strip of triangles

v0

v2

v1

v3

v4 v5

v6v7

Page 35: CENG477 Introduction to Computer Graphics Introduction to OpenGL, GLUT and GLUI.

Vertices and Primitives

Triangle Fan , GL_TRIANGLE_FAN linked fan of triangles

v0

v1 v2v3

v4

v5

Page 36: CENG477 Introduction to Computer Graphics Introduction to OpenGL, GLUT and GLUI.

Vertices and Primitives

Quads , GL_QUADS quadruples of vertices interpreted as four-sided

polygons

Page 37: CENG477 Introduction to Computer Graphics Introduction to OpenGL, GLUT and GLUI.

Vertices and Primitives

Quad Strip , GL_QUAD_STRIP linked strip of quadrilaterals

v0 v1

v2 v3

v4 v5

v6v7

Page 38: CENG477 Introduction to Computer Graphics Introduction to OpenGL, GLUT and GLUI.

Vertices and Primitives

Vertices may be specified in 2D, 3D, or 4D. 2D coordinates are promoted to 3D by

assigning a Z value of zero. 4D homogeneous coordinates are reduced to

3D by dividing x, y, and z by the w coordinate (if non-zero).

Page 39: CENG477 Introduction to Computer Graphics Introduction to OpenGL, GLUT and GLUI.

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 glTexCoord*() : set texture coordinates

Page 40: CENG477 Introduction to Computer Graphics Introduction to OpenGL, GLUT and GLUI.

Vertices and Primitives

glMultiTexCoord*() : set texture coordinates for multitexturing

glEdgeFlag*() : control drawing of edges glMaterial*() : set material properties glArrayElement() : Extract array element data glCallList(), glCallLists() : execute display list

Page 41: CENG477 Introduction to Computer Graphics Introduction to OpenGL, GLUT and GLUI.

GLUI

GLUI is a GLUT-based C++ user interface library which provides controls such as buttons, checkboxes, radio buttons, spinners, etc.

It is window-system independent, relying on GLUT to handle all system-dependent issues, such as window and mouse management.

Page 42: CENG477 Introduction to Computer Graphics Introduction to OpenGL, GLUT and GLUI.

GLUI Controls

Page 43: CENG477 Introduction to Computer Graphics Introduction to OpenGL, GLUT and GLUI.

GLUI - Simple Programming Interface GLUI provides default values for many parameters in the API and

there are several ways to create a control:

GLUI *glui;...glui->add_checkbox("Click me"); Adds a simple checkbox with

the name "Click me"glui->add_checkbox("Click me", &state );

The variable state will now be automatically update to reflect the state of the checkbox (live variable).glui->add_checkbox( "Click me", &state, 17, callback_fn );

Now we have a live variable, plus a callback functionwill be invoked (and passed the value '17') wheneverthe checkbox changes state.

Page 44: CENG477 Introduction to Computer Graphics Introduction to OpenGL, GLUT and GLUI.

Usage for standalone GLUI windowsIntegrating GLUI with a new or existing GLUT application is verystraightforward. The steps are:

1. Add the GLUI library to the link line (e.g., glui32.lib for Windows -lglui in Linux).

2. Include the file "glui.h" in all sources that will use the GLUI library.3. Create your regular GLUT windows as usual. Make sure to store the

window id of your main graphics window, so GLUI windows can later send it redisplay events:

int window_id = glutCreateWindow( "Main gfx window" );

4. Register your GLUT callbacks as usual (except the Idle callback, discussed below).

Page 45: CENG477 Introduction to Computer Graphics Introduction to OpenGL, GLUT and GLUI.

Usage for standalone GLUI windows5. Register your GLUT idle callback (if any) with GLUI_Master (a

global object which is already declared), to enable GLUI windows to take advantage of idle events without interfering with your application's idle events. If you do not have an idle callback, pass in NULL.

GLUI_Master.set_glutIdleFunc( myGlutIdle );or

GLUI_Master.set_glutIdleFunc( NULL );6. In your idle callback, explicitly set the current GLUT window before

rendering or posting a redisplay event. Otherwise the redisplay may accidently be sent to a GLUI window.

void myGlutIdle( void ) {

glutSetWindow(main_window);glutPostRedisplay();

}

Page 46: CENG477 Introduction to Computer Graphics Introduction to OpenGL, GLUT and GLUI.

Usage for standalone GLUI windows7. Create a new GLUI window using

GLUI *glui = GLUI_Master.create_glui( "name", flags, x, y );

Note that flags, x, and y are optional arguments. If they are not specified, default values will be used. GLUI provides default values for arguments whenever possible.

8. Add controls to the GLUI window. For example, we can add a checkbox and a quit button with:

glui->add_checkbox( "Lighting", &lighting );glui->add_button( "Quit", QUIT_ID, callback_func );

Page 47: CENG477 Introduction to Computer Graphics Introduction to OpenGL, GLUT and GLUI.

Usage for standalone GLUI windows9. Let each GLUI window you've created know where its

main graphics window is:

glui->set_main_gfx_window( window_id );

10. Invoke the standard GLUT main event loop, just as in any GLUT application:

glutMainLoop();

Refer GLUI Manual on the usage for GLUI subwindows

Page 48: CENG477 Introduction to Computer Graphics Introduction to OpenGL, GLUT and GLUI.

What’s Next…

Display Lists Viewing Lighting Texture Mapping …

Page 49: CENG477 Introduction to Computer Graphics Introduction to OpenGL, GLUT and GLUI.

References

1. http://www.opengl.org/documentation/spec.html2. The OpenGL Programming Guide - The

Redbookhttp://www.opengl.org/documentation/red_book_1.0/

3. http://www.cs.rit.edu/~jdb/cg1/openGLIntro.pdf