3. GLUT - The OpenGL Utility Toolkit
• simple, easy and small
• window system independent toolkit for writing OpenGL
programs;
• implements a simple windowing API;
• makes it considerably easier to learn and explore OpenGL;
• provides portable API – you can write a single OpenGL program;
• designed for constructing small sized OpenGL programs;
• is not a full-featured toolkit for large applications that requires
sophisticated user interface
• has C/C++ and FORTRAN programming bindings
• available on nearly all platforms
4. Simple GLUT program
Step0.c
Log on to katana
% cp –r /scratch/ogltut/ogl .
% cd ogl
Note that after tutorial, examples will be available via
the web, but not in the location above.
Go to
http://scv.bu.edu/documentation/presentations/intro_to_OpenGL/ogltut/
5. Simple GLUT program
#include <stdio.h>
#include <stdlib.h>
#include <GL/glut.h>
void display(void);
void init(void);
int main(int argc, char **argv){
glutInit(&argc, argv); // GLUT Configuration
glutCreateWindow("Sample GL Window"); // Create Window and give a title
glutDisplayFunc(display); /* Set display as a callback for the current window */
init(); /* Set basic openGL states */
/* Enter GLUT event processing loop,
which interprets events and calls respective callback routines */
glutMainLoop();
return 0;
}
Step0.c
6. Simple GLUT program
/* called once to set up basic opengl state */
void init( ){
}
/* display is called by the glut main loop once for every animated frame */
void display( ){
}
Step0.c
7. Steps to edit, compile and run the
program
• Edit the source file in the editor, save it and exit
• >make file_name
• >file_name
• For step0.c:
• >make step0
• >step0
8. More GLUT functions
int main(int argc, char **argv){
glutInit(&argc, argv); // GLUT Configuration
glutInitDisplayMode ( GLUT_DOUBLE | GLUT_RGB | GLUT_DEPTH );
glutInitWindowSize ( 500, 500 ); // Set size and position of the window
glutWindowPosition ( 200, 200 );
glutCreateWindow(“GL Primitives"); // Create Window and give a title
glutDisplayFunc(display); /* Set a callback for the current window */
init(); /* Set basic openGL states */
/* Enter GLUT event processing loop */
glutMainLoop();
return 0;
}
Step1.c
9. Initialize openGL scene
/* called once to set up basic openGL state */
void init(void){
glEnable(GL_DEPTH_TEST); /* Use depth buffering for hidden surface removal*/
glMatrixMode(GL_PROJECTION); /* Set up the perspective matrix */
glLoadIdentity();
/* left, right, bottom, top, near, far */
/* near and far values are the distances
from the camera to the front and rear clipping planes */
glOrtho(-4.0, 4.0, -4.0, 4.0, 1., 10.0); // orthgraphic view
glMatrixMode(GL_MODELVIEW); /* Set up the model view matrix */
glLoadIdentity();
/* Camera position */
/* By the default, the camera is situated at the origin, points down the negative
z-axis, and has an upper vector (0,1,0)*/
gluLookAt(0.,0.,5.,0.,0.,0.,0.,1.,0.);
}
Step1.c
10. More GLUT functions
/* drawing routine, called by the display function every animated frame */
void mydraw( ){
glColor3f( 1.0, 0.0, 0.0); // red color
glutSolidSphere(1., 24, 24); // draw a sphere of radius 1.
}
/* display is called by the glut main loop once for every animated frame */
void display( ){
/* initialize color and depth buffers */
glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
/* call the routine that actually draws what you want */
mydraw();
glutSwapBuffers(); /* show the just-filled frame buffer */
}
Step1.c
12. Interactive Exercise #1: working with GLUT primitives
• Run interactive exercise #1
• >int_gl_prim
• Use up and down arrows to explore different
GLUT primitives
• Use w/s keys to switch between wire and solid
state
Step1.c
14. Colors: RGBA vs. Color-Index
Color mode
RGBA mode
Color-Index
Mode
15. Interactive Exercise #2: Exploring openGL colors
• Run interactive exercise
• >int_gl_color
• Press c/s keys to switch between object/background mode
• Use r/g/b keys to switch between red/green/blue components
• Use arrow keys to modify the value of color component
Step1.c
16. Setting up the scene and adding color
/* display is called by the glut main loop once for every
animated frame */
void display( ){
/* initialize background color and clear color and
depth buffers */
glClearColor(0.7f, 0.7f, 0.7, 0.0f);
glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
mydraw();
glutSwapBuffers();
}
Step1.c
17. Setting up the scene and adding color
void mydraw() {
glColor3f( 1.0, 0.0, 0.0); /* red color */
glutSolidTeapot(.5); /* draw teapot */
}
More information about gl color routines:
http://www.opengl.org/sdk/docs/man/xhtml/glColor.xml
Step1.c
19. Viewing: Camera Analogy
Positioning the
Camera
Positioning the Model
Choose a camera lens
and adjust zoom
Mapping to screen
Viewing
Transformation
Modeling
Transformation
Projection Transformation
Viewport Transformation
Step1.c
20. Viewport transformation
• indicates the shape of the available screen area into which the
scene is mapped
• Since viewport specifies the region the image occupies on the
computer screen, you can think of the viewport transformation
as defining the size and location of the final processed
photograph - for example, whether the photograph should be
enlarged or shrunk.
• if the window changes size, the viewport needs to change
accordingly
Step1.c
void glViewport( int x,
int y,
int width,
int height);
22. Projection
Perspective vs. Orthographic
Objects which are far away are smaller than those
nearby;
Does not preserve the shape of the objects.
Perspective view points give more information about
depth; Easier to view because you use perspective
views in real life.
Useful in architecture, game design, art etc.
All objects appear the same size regardless the
distance;
Orthographic views make it much easier to compare
sizes of the objects. It is possible to accurately
measure the distances
All views are at the same scale
Very useful for cartography, engineering drawings,
machine parts.
Step1.c
25. Perspective Transformation
Four sides of the frustum, its top, and its base correspond to the
six clipping planes of the viewing volume.
Objects or parts of objects outside these planes are clipped from
the final image
Does not have to be symmetrical
Step1.c
29. Setting up the scene
void init(void) { /* called once to set up basic opengl state */
glEnable(GL_DEPTH_TEST);
glMatrixMode(GL_PROJECTION); /* Set up the projection matrix */
glLoadIdentity();
// left,right,bottom,top,near,far
glFrustum(-1.0, 1.0, -1.0, 1.0, 1., 10.0); // perspective view
// glOrtho (-1.0, 1.0, -1.0, 1.0, 1., 10.0); // orthographic view
// gluPerspective(45.0f, 1., 1., 10.); // perspective view
glMatrixMode(GL_MODELVIEW); /* Set up the model view matrix */
glLoadIdentity();
eye center up-direction
gluLookAt(0.,0.,2.,0.,0.,0.,0.,1.,0.); /* Camera position */
}
Step1.c
30. Interactive exercise #3: setting up the camera
• Run interactive exercise
• >int_gl_camera
• Use a/ n/ f keys to choose angle/ near/ far modes.
• Use ex/ ey/ ez keys to choose x, y, z values for eye
location.
• Use cx/ cy/ cz keys to choose x, y, z values for center
location.
Step1.c
31. Assignment #1: setting up the scene
• Modify input file step1.c
1) Draw a ball with the color of your choice
2) Set orthographic projection, so that the diameter
of the ball would be about 20% of the width of
the screen.
3) Set up camera on z axis 5 units away from the
origin
step1.c
32. Additional GLUT callback routines
GLUT supports many different callback actions, including:
glutDisplayFunc()defines the function that sets up the image on the screen
glutReshapeFunc() function is called when the size of the window is changed
glutKeyBoardFunc() callback routine to respond on keyboard entry
glutMouseFunc() callback to respond on pressing the mouse button
glutMotionFunc() callback to respond mouse move while a mouse button is
pressed
glutPassiveMouseFunc() callback to respond to mouse motion regardless state
of mouse button
glutIdleFunc() callback routine for idle state, usually used for animation
More info: http://www.opengl.org/resources/libraries/glut/spec3/node45.html
step2.c
33. Additional GLUT callback routines
int main(int argc, char **argv)
{
. . .
/* Set callback function that responds on keyboard pressing */
glutKeyboardFunc (keypress);
. . .
}
/* keyboard callback routine */
void keypress( unsigned char key, int x, int y)
{
if (key == 'q' || key =='Q' || key ==27)exit(0); // exit
}
step2.c
34. Callback routines & Window Resizing
int main(int argc, char **argv) {
. . .
/* Set display as a callback for the current window */
glutDisplayFunc(display);
/* Set callback function that respond to resizing the window */
glutReshapeFunc(resize);
/* Set callback function that responds on keyboard pressing */
glutKeyboardFunc(keypress);
/* Set callback function that responds on the mouse click */
glutMouseFunc(mousepress);
. . .
}
Step2.c
36. Assignment #2: callback routines and viewport
• Modify input file step2.c
1) Enable a Keyboard callback routine that prints
the pressed key in the command window
2) Make the program exit, when ESC (ascii=27), "q"
or "Q" are pressed
3) Enable a Mouse callback routine that prints on
the screen the information about which mouse
button was pressed
step2.c
39. Define a box
void boxDef( float length, float height, float width)
{
glBegin(GL_QUADS);
/* you can color each side or even each vertex in different color */
glColor3f(0., .35, 1.);
glVertex3f(-length/2., height/2., width/2.);
glVertex3f( length/2., height/2., width/2.);
glVertex3f( length/2., height/2.,-width/2.);
glVertex3f(-length/2., height/2.,-width/2.);
/* add here other sides */
…..
glEnd();
}
step3.c
43. Assignment #3: GL primitives and transformations
• Modify input file step3.c
1) Create a thin box, centered around 0, using GL_QUADS type.
This box should be .01 thick (along y axis), 2.0 units in
length (in x axis), .4 units in width (along z axis).
2) Define a different (from your sphere) color for the box.
Remember you can assign a different color for each quad or
even to each vertex(!).
3) Move your sphere 1 unite up along y axis.
4) Move box down y axis, so its upper plane is on the level y=0.
5) Modify your keypress callback function to respond on pressing
"w" and "s" keys to switch between wire and solid states:
The GL constants are GL_FILL and GL_LINE
step3.c
44. OpenGL Display Lists
// create one display list
int index = glGenLists(1);
// compile the display list
glNewList(index, GL_COMPILE);
glBegin(GL_TRIANGLES);
glVertex3fv(v0);
glVertex3fv(v1);
glVertex3fv(v2);
glEnd();
glEndList();
...
// draw the display list
glCallList(index);
...
// delete it if it is not used any more
glDeleteLists(index, 1);
step4.c
45. Assignment #4: using GL lists
• Modify input file step4.c
1) use glScale to scale down the ball. Try to place glScale
command before glTranslate and then after. Compare the
results.
2) Add to the keyPress callback routine: if user presses "<" and
">" (or left, right) buttons, the platform (box) moves to the
left and to the right accordingly.
3) Remember it should not go beyond the clipping planes, so x
coordinate for the translation can not exceed plus/minus 4
step4.c
46. Lighting
has no source, considered
to be everywhere.
Ambient Light
• glLightfv(GL_LIGHT0, GL_AMBIENT, light_amb)
shines upon an object indirectly
Diffuse Light
• glLightfv(GL_LIGHT0, GL_DIFFUSE, light_diff)
highlights an object with a
reflective color.
Specular Light
• glLightfv(GL_LIGHT0, GL_SPECULAR, light_spec)
Ambient
Diffuse
Specular
Ambient & Diffuse
Diffuse & Specular
Ambient, Diffuse
& Specular
step5.c
47. Light(s) Position
Light
Positional / Spotlight Directional
At least 8 lights available.
GLfloat light_pos[] = { x, y, z, w } // 4th
value: w=1 – for positional, w=0 – for directional
glLightfv (GL_LIGHT0, GL_POSITION, light_pos)
step5.c
http://www.opengl.org/sdk/docs/man/xhtml/glLight.xml
48. Material Properties
default = (0.2, 0.2, 0.2, 1.0)
Ambient
• GLfloat mat_amb [] = {0.1, 0.5, 0.8, 1.0};
• glMaterialfv(GL_FRONT_AND_BACK, GL_AMBIENT, mat_amb);
In real life diffuse and ambient colors are set to the same value default = (0.8, 0.8, 0.8, 1.0)
Diffuse
• GLfloat mat_diff [] = {0.1, 0.5, 0.8, 1.0};
• glMaterialfv(GL_FRONT_AND_BACK, GL_DIFFUSE, mat_diff);
default = (0.0, 0.0, 0.0, 1.0)
Specular
• GLfloat mat_spec [] = {1.0, 1.0, 1.0, 1.0};
• glMaterialfv(GL_FRONT, GL_SPECULAR, mat_spec);
controls the size and brightness of the highlight, value range (0. to 128.) default =0.0
Shininess
• GLfloat low_shininess [] = {5.}; // the higher value the smaller and brighter (more focused) the highlight
• glMaterialfv(GL_FRONT, GL_SHININESS, low_shininess);
emissive color of material (usually to simulate a light source), default = (0.0, 0.0, 0.0, 1.0)
Emission
• GLfloat mat_emission[] = {0.3, 0.2, 0.2, 0.0};
• glMaterialfv(GL_FRONT, GL_EMISSION, mat_emission);
step5.c
49. Default Lighting values
Parameter Name Default Value Meaning
GL_AMBIENT (0.0, 0.0, 0.0, 1.0) ambient RGBA intensity of light
GL_DIFFUSE (1.0, 1.0, 1.0, 1.0) diffuse RGBA intensity of light
GL_SPECULAR (1.0, 1.0, 1.0, 1.0) specular RGBA intensity of light
GL_POSITION (0.0, 0.0, 1.0, 0.0) (x, y, z, w) position of light
GL_SPOT_DIRECTION (0.0, 0.0, -1.0) (x, y, z) direction of spotlight
step5.c
50. Default Material values
Parameter Name Default Value Meaning
GL_AMBIENT (0.2, 0.2, 0.2, 1.0) ambient color of material
GL_DIFFUSE (0.8, 0.8, 0.8, 1.0) diffuse color of material
GL_AMBIENT_AND_DIFFUSE ambient and diffuse color of
material
GL_SPECULAR (0.0, 0.0, 0.0, 1.0) specular color of material
GL_SHININESS 0.0 specular exponent
in the range of 0.0 to 128.0
GL_EMISSION (0.0, 0.0, 0.0, 1.0) emissive color of material
(to simulate a light)
step5.c
51. A simple way to define light
• Light:
o set diffuse to the color you want the light to be
o set specular equal to diffuse
o set ambient to 1/4 of diffuse.
• Material:
o set diffuse to the color you want the material to be
o set specular to a gray (white is brightest reflection, black is no reflection)
o set ambient to 1/4 of diffuse
step5.c
52. Enable Lighting
• /* Enable a single OpenGL light. */
• glLightfv(GL_LIGHT0, GL_DIFFUSE, light_diffuse);
• glLightfv(GL_LIGHT0, GL_POSITION, light_position);
• glEnable(GL_LIGHT0);
• glEnable(GL_LIGHTING);
• glClearColor (0.0, 0.0, 0.0, 0.0); // background color
• glShadeModel (GL_SMOOTH); // shading algorithm
• glMaterialfv(GL_FRONT, GL_SPECULAR, mat_specular);
• glMaterialfv(GL_FRONT, GL_SHININESS, mat_shininess);
• glEnable(GL_NORMALIZE); //enable normalizing to avoid problems with light!
• …
• glBegin(GL_QUADS); // specify a normal either per vertex or per polygon
glNormal3f(0, 0, 1);
glVertex3fv(a);
glVertex3fv(b);
glVertex3fv(c);
glVertex3fv(d);
glEnd();
step5.c
53. Assignment #5: add lights to the scene and
explore transformations
• Modify input file step5.c
1) Enable openGL lighs. Use directional light with the direction
coming diagonaly from the upper right corner toward the
origin.
2) Calculate normals for the sides of the platform
3) Add to the keyboard events the handling of pressing X, Y, Z,
keys - they will change the axis of the rotation. And pressing
keys F and B will rotate the object for 10 degrees. Apply this
rotations to the platform only.
step5.c
54. Assignment #6: putting it all together for a game!
• Modify input file step6.c
1) move the platform down the screen, so it would move along the
y=-4 level
2) make ball "bounce" from the wall, left and right walls and the
platform
3) if the ball misses the platform, it should "fall" beneath the
"floor" and a new ball should appear from the "ceiling".
step6.c
56. Thank you! Final Notes:
• Please fill out an online evaluation of this tutorial:
scv.bu.edu/survey/tutorial_evaluation.html
• System help
[email protected], [email protected]
• Web-based tutorials
www.bu.edu/tech/research/tutorials
• Consultation by appointment
Katia Oleinik([email protected])
Editor's Notes
#14:On a color Computer screen, the hardware causes each pixel on the screen to emit different amounts of red, green and blue light. These are called RGB values. They are often stored together with a forth “A”-value, called alpha, which is used for blending and transparency.
In general, use the RGBA mode for your OpenGL applications; it provides more flexibility than the color-index mode for effects such as shading, lighting, color mapping, fog, antialiasing, and blending.
Consider using the color-index mode in the following cases:
If you have a limited number of bit-planes available; the color-index mode can produce less-coarse shading than the RGBA mode.
If you are not concerned about using "real" colors; for example, using several colors in a topographic map to designate relative elevations.
When you're porting an existing application that uses color-index mode extensively.
When you want to use color-map animation and effects in your application. (This is not possible on true-color devices.)
![Light(s) Position
Light
Positional / Spotlight Directional
At least 8 lights available.
GLfloat light_pos[] = { x, y, z, w } // 4th
value: w=1 – for positional, w=0 – for directional
glLightfv (GL_LIGHT0, GL_POSITION, light_pos)
step5.c
http://www.opengl.org/sdk/docs/man/xhtml/glLight.xml](https://image.slidesharecdn.com/openglsummer2012-250512114321-f2119474/85/OpenGL_summer2012-ccccccccccccccccccpptx-47-320.jpg)
![Material Properties
default = (0.2, 0.2, 0.2, 1.0)
Ambient
• GLfloat mat_amb [] = {0.1, 0.5, 0.8, 1.0};
• glMaterialfv(GL_FRONT_AND_BACK, GL_AMBIENT, mat_amb);
In real life diffuse and ambient colors are set to the same value default = (0.8, 0.8, 0.8, 1.0)
Diffuse
• GLfloat mat_diff [] = {0.1, 0.5, 0.8, 1.0};
• glMaterialfv(GL_FRONT_AND_BACK, GL_DIFFUSE, mat_diff);
default = (0.0, 0.0, 0.0, 1.0)
Specular
• GLfloat mat_spec [] = {1.0, 1.0, 1.0, 1.0};
• glMaterialfv(GL_FRONT, GL_SPECULAR, mat_spec);
controls the size and brightness of the highlight, value range (0. to 128.) default =0.0
Shininess
• GLfloat low_shininess [] = {5.}; // the higher value the smaller and brighter (more focused) the highlight
• glMaterialfv(GL_FRONT, GL_SHININESS, low_shininess);
emissive color of material (usually to simulate a light source), default = (0.0, 0.0, 0.0, 1.0)
Emission
• GLfloat mat_emission[] = {0.3, 0.2, 0.2, 0.0};
• glMaterialfv(GL_FRONT, GL_EMISSION, mat_emission);
step5.c](https://image.slidesharecdn.com/openglsummer2012-250512114321-f2119474/85/OpenGL_summer2012-ccccccccccccccccccpptx-48-320.jpg)
