Presentation is loading. Please wait.

Presentation is loading. Please wait.

OpenGL Graphics Programming Katia Oleinik: koleinik@bu.edu.

Similar presentations


Presentation on theme: "OpenGL Graphics Programming Katia Oleinik: koleinik@bu.edu."— Presentation transcript:

1 OpenGL Graphics Programming Katia Oleinik:

2 Graphics Programming OpenGL Low-level API cross-language
cross-platform 2D, 3D computer graphics

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 Log on to katana % cp –r /scratch/ogltut/ogl .
Step0.c Simple GLUT program 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

5 Simple GLUT program Step0.c #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; }

6 Simple GLUT program Step0.c
/* 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( ){

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 Step1.c
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; }

9 Initialize openGL scene
Step1.c 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 */ /* 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.); }

10 More GLUT functions Step1.c
/* 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 */

11 GLUT primitives void glutSolidSphere(GLdouble radius, GLint slices, GLint stacks); void glutWireSphere(GLdouble radius, GLint slices, GLint stacks); void glutSolidCube(GLdouble size); void glutSolidCone(GLdouble base, GLdouble height, GLint slices, GLint stacks); void glutSolidTorus(GLdouble innerRadius, GLdouble outerRadius, GLint nsides, GLint rings); void glutSolidDodecahedron(void); // radius sqrt(3) void glutSolidTetrahedron(void); // radius sqrt(3) void glutSolidIcosahedron(void) // radius 1 void glutSolidOctahedron(void); // radius 1

12 Interactive Exercise #1: working with GLUT primitives
Step1.c 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

13 GLUT primitives glutSolidSphere glutWireSphere
Step1.c GLUT primitives glutSolidSphere glutWireSphere glutSolidCube glutWireCube glutSolidCone glutWireCone glutSolidTorus glutWireTorus glutSolidDodecahedron glutWireDodecahedron glutSolidOctahedron glutWireOctahedron glutSolidTetrahedron glutWireTetrahedron glutSolidIcosahedron glutWireIcosahedron glutSolidTeapot glutWireTeapot More info:

14 Colors: RGBA vs. Color-Index
Color mode RGBA mode Color-Index Mode 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.)

15 Interactive Exercise #2: Exploring openGL colors
Step1.c 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

16 Setting up the scene and adding color
Step1.c 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(); }

17 Setting up the scene and adding color
Step1.c 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:

18 Open GL transformation
Step1.c Open GL transformation

19 Viewing: Camera Analogy
Step1.c 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 Viewing: Camera Analogy

20 Viewport transformation
Step1.c 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 void glViewport( int x, int y, int width, int height);

21 Viewport transformation
Step1.c Viewport transformation glViewport( 0, 0, width, height);

22 Projection Perspective vs. Orthographic
Step1.c 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. 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.

23 Projection transformation
Step1.c Projection transformation glMatrixMode(GL_PROJECTION); glLoadIdentity(); //perspective projection glFrustum(left, right, bottom, top, near, far); Or //orthographic projection glOrtho (left, right, bottom, top, near, far);

24 Perspective Transformation
Step1.c Perspective Transformation //perspective projection void glFrustum(double left, double right, double bottom, double top, double near, double far);

25 Perspective Transformation
Step1.c 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

26 Perspective Transformation
Step1.c Perspective Transformation //perspective projection void gluPerspective( double fovy, double aspect, double near, double far);

27 Orthographic Transformation
Step1.c Orthographic Transformation //orthographic projection void glOrtho( double left, double right, double bottom, double top, double near, double far);

28 Modelview Matrix Step1.c
//perspective projection void gluLookAt(double eyeX, double eyeY, double eyeZ, double centerX, double centerY, double centerZ, double upX, double upY, double upZ);

29 Setting up the scene Step1.c
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 */ eye center up-direction gluLookAt(0.,0.,2.,0.,0.,0.,0.,1.,0.); /* Camera position */ }

30 Interactive exercise #3: setting up the camera
Step1.c 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.

31 Assignment #1: setting up the scene
step1.c Assignment #1: setting up the scene Modify input file step1.c Draw a ball with the color of your choice Set orthographic projection, so that the diameter of the ball would be about 20% of the width of the screen. Set up camera on z axis 5 units away from the origin

32 Additional GLUT callback routines
step2.c 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:

33 Additional GLUT callback routines
step2.c 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

34 Callback routines & Window Resizing
Step2.c 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); }

35 Callback routines & Window Resizing
Step2.c Callback routines & Window Resizing void keypress( unsigned char key, int x, int y) { … } void mousepress( int button, int state, int x, int y) { … } void resize(int width, int height) { double aspect; glViewport(0,0,width,height); /* Reset the viewport */ aspect = (double)width / (double)height; /* compute aspect ratio*/ glMatrixMode(GL_PROJECTION); glLoadIdentity(); //reset projection matrix if (aspect < 1.0) { glOrtho(-4., 4., -4./aspect, 4./aspect, 1., 10.); } else { glOrtho(-4.*aspect, 4.*aspect, -4., 4., 1., 10.); } glMatrixMode(GL_MODELVIEW); glLoadIdentity(); gluLookAt(0., 0., 5., 0., 0., 0., 0., 1., 0.);

36 Assignment #2: callback routines and viewport
step2.c Assignment #2: callback routines and viewport Modify input file step2.c Enable a Keyboard callback routine that prints the pressed key in the command window Make the program exit, when ESC (ascii=27), "q" or "Q" are pressed Enable a Mouse callback routine that prints on the screen the information about which mouse button was pressed

37 Geometric Primitives Points Lines Polygons step3.c Vertices Width
Coordinates Size Lines Vertices Width Stippling Polygons Outline/solid Normals

38 OpenGL Primitives step3.c
glBegin(GL_LINES); glVertex3f(10.0f, 0.0f, 0.0f); glVertex3f(20.0f, 0.0f, 0.0f); glVertex3f(10.0f, 5.0f, 0.0f); glVertex3f(20.0f, 5.0f, 0.0f); glEnd();

39 step3.c 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(); }

40 OpenGL Transformations
step3.c OpenGL Transformations Vertex Data ModelView Matrix Projection Matrix Perspective Division Viewport Transformation Object Coordinates Eye Coordinates Clip Coordinates Device Coordinates Window Coordinates

41 Model View Transformations
step3.c glMatrixMode(GL_MODELVIEW); glLoadIdentity(); glTranslate(x, y, z); /* transformation L */ glRotate (angle, x, y, z); /* transformation M */ glScale (x, y, z); /* transformation N */ Order of operations: L * M * N * v Draw Geometry

42 Model View Transformations
step3.c Model View Transformations View from a plane Orbit an object void pilotView( … ) { glRotatef(roll, 0.0, 0.0, 1.0); glRotatef(pitch, 0.0, 1.0, 0.0); glRotatef(heading, 1.0, 0.0, 0.0); glTranslatef(-x, -y, -z); } void polarView( … ) { glTranslatef(0.0, 0.0, -distance); glRotated(-twist, 0.0, 0.0, 1.0); glRotated(-elevation, 1.0, 0.0,0.0); glRotated(azimuth, 0.0, 0.0, 1.0); }

43 Assignment #3: GL primitives and transformations
step3.c Assignment #3: GL primitives and transformations Modify input file step3.c 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). 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(!). Move your sphere 1 unite up along y axis. Move box down y axis, so its upper plane is on the level y=0. 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

44 OpenGL Display Lists step4.c
// 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);

45 Assignment #4: using GL lists
step4.c Assignment #4: using GL lists Modify input file step4.c use glScale to scale down the ball. Try to place glScale command before glTranslate and then after. Compare the results. 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. Remember it should not go beyond the clipping planes, so x coordinate for the translation can not exceed plus/minus 4

46 Ambient, Diffuse & Specular
step5.c 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 Ambient, Diffuse & Specular Ambient & Diffuse Diffuse Diffuse & Specular Specular

47 At least 8 lights available.
step5.c Light(s) Position At least 8 lights available. Light Positional / Spotlight Directional GLfloat light_pos[] = { x, y, z, w } // 4th value: w=1 – for positional, w=0 – for directional glLightfv (GL_LIGHT0, GL_POSITION, light_pos)

48 Material Properties step5.c Ambient Diffuse Specular Shininess
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);

49 Default Lighting values
step5.c 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 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

50 Default Material values
step5.c 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 emissive color of material (to simulate a light)

51 A simple way to define light
step5.c Light: set diffuse to the color you want the light to be set specular equal to diffuse set ambient to 1/4 of diffuse. Material: set diffuse to the color you want the material to be set specular to a gray (white is brightest reflection, black is no reflection) set ambient to 1/4 of diffuse

52 Enable Lighting step5.c /* 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();

53 Assignment #5: add lights to the scene and explore transformations
step5.c Assignment #5: add lights to the scene and explore transformations Modify input file step5.c Enable openGL lighs. Use directional light with the direction coming diagonaly from the upper right corner toward the origin. Calculate normals for the sides of the platform 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.

54 Assignment #6: putting it all together for a game!
step6.c Assignment #6: putting it all together for a game! Modify input file step6.c move the platform down the screen, so it would move along the y=-4 level make ball "bounce" from the wall, left and right walls and the platform if the ball misses the platform, it should "fall" beneath the "floor" and a new ball should appear from the "ceiling".

55 OpenGL Helpful Materials
GLUT: Reference: Online documentation From OpenGL.org (examples and tutorials): Examples: “Red book”: OpenGL Programming Guide. Woo, Neider, Davis, Shreiner. ISBN “Blue book”: OpenGL Reference Manual. Shreiner. ISBN Books:

56 Thank you! Final Notes: Please fill out an online evaluation of this tutorial: scv.bu.edu/survey/tutorial_evaluation.html System help Web-based tutorials Consultation by appointment Katia


Download ppt "OpenGL Graphics Programming Katia Oleinik: koleinik@bu.edu."

Similar presentations


Ads by Google