Lecture 12: OpenGL Li Zhang Spring 2008 CS559: Computer Graphics Lecture 12: OpenGL Li Zhang Spring 2008

So far: 3D Geometry Pipeline View -> canonical is most tricky one. Rotation Translation Resizing Rotation Translation Eye Space (View Space) Model Space (Object Space) World Space Image Space (pixels) Raster Space Canonical View Space Screen Space (2D)

OpenGL We have been focused on math description We’ll move on practical graphics programming for a week

Modern graphics systems Display Photoshop 3D Max Softimage Maya and ? OpenGL Direct3D … nVidia ATI … Your homework Graphics card is part of “hardware” box An application, which talks to a… Graphics library (e.g., OpenGL or Direct3D), which talks to the… Graphics hardware

OpenGL A software interface to graphics hardware. 700 distinct commands 650 in the core OpenGL 50 in the utility library Specify objects, viewing, lighting, surface material Hardware independent interface No commands for windowing tasks No high level object models You need to specify geometric primitives Points, lines, polygons. You need to rely on other software lib to manage windows, which dependds on operation systems, in our class, it’s windows.

What can OpenGL do? wireframe Line is an edge of a geometric primitive, often polygons Table top : triangle polygons like pizza slices See hills though window, other wise occluded Don’t see though globe, because of many blocks This pictures shows that many simple small primitives can be assembled in opengl to shape a very complex one wireframe

What can OpenGL do? Antialised lines Unnecessary high freq info Distracting  Such jaggies are usually the most visible with near-horizontal or near-vertical lines.  Antialised lines

What can OpenGL do? Depth cue using fog Light is from father away is attenuted by the fog, the farther the object, the dimmer it looks like. Depth cue using fog

What can OpenGL do? Flat-shaded polygons solid objects of a single color Look flat Because object surface do not repond to lighting. Flat-shaded polygons

What can OpenGL do? Lighting and smooth-shaded polygons  the objects are shaded to respond to the light sources in the room Much more realistic, and 3D looking Lighting and smooth-shaded polygons

What can OpenGL do? Texturemap and shadow Floor, table top, and wall paper shadow Texturemap and shadow

What can OpenGL do? Flow Blured trace of its path Motion blur

What can OpenGL do? From a different viewpoints View point change

What can OpenGL do? the presence of particles in the air Smoke

What can OpenGL do? Depth of field Aperture effect, Focus on yellow Blury on closer or farther away Depth of field

Hello, world #include <whateverYouNeed.h> main() {   main() {    OpenAWindowPlease();    glClearColor(0.0, 0.0, 0.0, 0.0);    glClear(GL_COLOR_BUFFER_BIT);    glColor3f(1.0, 1.0, 1.0);    glOrtho(-1.0, 1.0, -1.0, 1.0, -1.0, 1.0);     glBegin(GL_POLYGON);       glVertex2f(-0.5, -0.5);       glVertex2f(-0.5, 0.5);       glVertex2f(0.5, 0.5);       glVertex2f(0.5, -0.5);    glEnd();    glFlush();    KeepTheWindowOnTheScreenForAWhile(); } Clear color, like the canvas color in painting program

OpenGL syntax gl prefix for all commands GL_ for constants glColor3f(1.0, 1.0, 1.0); glColor3d(1.0, 1.0, 1.0); glColor3s(1, 1, 1); glColor3i(1, 1, 1); …… Suffix Data Type Typical Corresponding C-Language Type OpenGL Type Definition b 8-bit integer signed char GLbyte s 16-bit integer short GLshort i 32-bit integer long GLint, GLsizei f 32-bit floating-point float GLfloat, GLclampf d 64-bit floating-point double GLdouble, GLclampd ub 8-bit unsigned integer unsigned char GLubyte, GLboolean us 16-bit unsigned integer unsigned short GLushort ui 32-bit unsigned integer unsigned long GLuint, GLenum, GLbitfield

OpenGL syntax glVertex2i(1, 1); glVertex2f(1.0, 1.0); glColor3f(1.0, 0.0, 0.0); glColor3ub(255, 0, 0); glColor3f(1.0, 0.0, 0.0); float color_array[] = {1.0, 0.0, 0.0}; glColor3fv(color_array);

Windows management GLUT lib #include <GL/gl.h> #include <GL/glut.h> int main(int argc, char** argv){ glutInit(&argc, argv); glutInitDisplayMode (GLUT_SINGLE | GLUT_RGB); glutInitWindowSize (250, 250); glutInitWindowPosition (100, 100); glutCreateWindow ("hello"); init (); }

Windows management GLUT lib #include <GL/gl.h> #include <GL/glut.h> int main(int argc, char** argv){ glutInit(&argc, argv); glutInitDisplayMode (GLUT_SINGLE | GLUT_RGB); glutInitWindowSize (250, 250); glutInitWindowPosition (100, 100); glutCreateWindow ("hello"); init (); glutDisplayFunc(display); } void init (void) { 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); }

Windows management GLUT lib #include <GL/gl.h> #include <GL/glut.h> int main(int argc, char** argv){ glutInit(&argc, argv); glutInitDisplayMode (GLUT_SINGLE | GLUT_RGB); glutInitWindowSize (250, 250); glutInitWindowPosition (100, 100); glutCreateWindow ("hello"); init (); glutDisplayFunc(display); glutMainLoop(); return 0; } void display(void){ glClear (GL_COLOR_BUFFER_BIT);  glColor3f (1.0, 1.0, 1.0); glBegin(GL_POLYGON);      glVertex2f(-0.5, -0.5);      glVertex2f(-0.5, 0.5);      glVertex2f(0.5, 0.5);      glVertex2f(0.5, -0.5); glEnd();  glFlush (); }  

Animation If you’re showing video, then parts of the frame will be from different times. If you’re drawing a moving model (and/or moving viewpoint), then the framebuffer is cleared before each drawing, and: If the model is small, then, e.g., the upper part of the screen will correspond to one time, and the lower part will correspond to another. If the model is large, then you’ll see it being drawn gradually. open_window(); for (i = 0; i < 1000000; i++) { clear_the_window(); draw_frame(i); wait_until_a_24th_of_a_second_is_over(); } Q: What happens when you write to the framebuffer while it is being displayed on the monitor?

Animation If you’re showing video, then parts of the frame will be from different times. If you’re drawing a moving model (and/or moving viewpoint), then the framebuffer is cleared before each drawing, and: If the model is small, then, e.g., the upper part of the screen will correspond to one time, and the lower part will correspond to another. If the model is large, then you’ll see it being drawn gradually. open_window(); for (i = 0; i < 1000000; i++) { clear_the_window(); draw_frame(i); wait_until_a_24th_of_a_second_is_over(); } Q: What happens when you write to the framebuffer while it is being displayed on the monitor?

Animation If you’re showing video, then parts of the frame will be from different times. If you’re drawing a moving model (and/or moving viewpoint), then the framebuffer is cleared before each drawing, and: If the model is small, then, e.g., the upper part of the screen will correspond to one time, and the lower part will correspond to another. If the model is large, then you’ll see it being drawn gradually. open_window(); for (i = 0; i < 1000000; i++) { clear_the_window(); draw_frame(i); wait_until_a_24th_of_a_second_is_over(); swap_the_buffers(); } Q: What happens when you write to the framebuffer while it is being displayed on the monitor?

Animation Example int main(int argc, char** argv){ glutInit(&argc, argv); glutInitDisplayMode (GLUT_DOUBLE | GLUT_RGB); glutInitWindowSize (250, 250); glutInitWindowPosition (100, 100); glutCreateWindow (argv[0]); init (); glutDisplayFunc(display); } void init(void) { glClearColor (0.0, 0.0, 0.0, 0.0); glShadeModel (GL_FLAT); } 

Animation Example int main(int argc, char** argv){ glutInit(&argc, argv); glutInitDisplayMode (GLUT_DOUBLE | GLUT_RGB); glutInitWindowSize (250, 250); glutInitWindowPosition (100, 100); glutCreateWindow (argv[0]); init (); glutDisplayFunc(display); glutMouseFunc(mouse); } static GLfloat spin = 0.0;  void display(void){ glClear(GL_COLOR_BUFFER_BIT); glPushMatrix(); glRotatef(spin, 0.0, 0.0, 1.0); glColor3f(1.0, 1.0, 1.0); glRectf(-25.0, -25.0, 25.0, 25.0); glPopMatrix(); glutSwapBuffers(); }  Guess what glShadeModel mean?

Animation Example void mouse(int button, int state, int x, int y) { switch (button) { case GLUT_LEFT_BUTTON: if (state == GLUT_DOWN) glutIdleFunc(spinDisplay); break; case GLUT_MIDDLE_BUTTON: if (state == GLUT_DOWN) glutIdleFunc(NULL); default: } int main(int argc, char** argv){ glutInit(&argc, argv); glutInitDisplayMode (GLUT_DOUBLE | GLUT_RGB); glutInitWindowSize (250, 250); glutInitWindowPosition (100, 100); glutCreateWindow (argv[0]); init (); glutDisplayFunc(display); glutMouseFunc(mouse); glutReshapeFunc(reshape); } spinDisplay(void){ spin = spin + 2.0; if (spin > 360.0) spin -= 360.0; glutPostRedisplay(); }

Animation Example void reshape(int w, int h){ glViewport (0, 0, (GLsizei) w, (GLsizei) h); glMatrixMode(GL_PROJECTION); glLoadIdentity(); glOrtho(-50.0, 50.0, -50.0, 50.0, -1.0, 1.0); glMatrixMode(GL_MODELVIEW); glLoadIdentity(); }  int main(int argc, char** argv){ glutInit(&argc, argv); glutInitDisplayMode (GLUT_DOUBLE | GLUT_RGB); glutInitWindowSize (250, 250); glutInitWindowPosition (100, 100); glutCreateWindow (argv[0]); init (); glutDisplayFunc(display); glutMouseFunc(mouse); glutReshapeFunc(reshape); glutMainLoop(); return 0; }

Event-Driven Programming Window management library GLUT / FLTK Events: key strokes, mouse clicks Event handlers: mouse(), display(), reshape()

Viewport void reshape (int w, int h) { glViewport (0, 0, w, h); glMatrixMode (GL_PROJECTION); glLoadIdentity (); gluOrtho2D (0.0, w, 0.0, h); }

Points, lines, and polygons Simple Polygonss: Convex & planar Nonplanar Polygon Transformed to Nonsimple Polygon

Drawing Primitives glBegin(GL_POLYGON); glVertex2f(0.0, 0.0); glEnd();

Drawing Primitives glBegin(GL_POINTS); glVertex2f(0.0, 0.0); glEnd();

Drawing Primitives

Drawing Primitives

Drawing Primitives

Drawing Primitives

Primitive Details glPointSize(GLfloat size) Approximate the point by squares for anti-aliasing glEnable(GL_POINT_SMOOTH);

Primitive Details glLineWidth(GLfloat width) Approximate the line by a rectangle for anti-aliasing glEnable (GL_LINE_SMOOTH); glLineWidth (1.5);

Primitive Details glPolygonMode(GLenum face, GLenum mode); face: GL_FRONT, GL_BACK mode: GL_POINT, GL_LINE, GL_FILL glPolygonMode(GL_FRONT, GL_FILL); glRectf(0, 0, 100, 100); glPolygonMode(GL_FRONT, GL_LINE); glRectf(0, 0, 100, 100); Line is how you draw wireframe

Primitive Details Determine Polygon Orientation Q3 P3 Q4 P4 Q2 P2 Q1 P1 Line is how you draw wireframe x Orientation == sign of the area

Icosahedron Normal Vectors

Icosahedron //initial icosahedron Static float t[20][3][3] = {…}; void display(void) { }

Icosahedron //initial icosahedron Static float t[20][3][3] = {…}; void display(void) { //clear buffer //set up viewport and frustum if (animation) angle+=0.3; if (angle>360) angle-=360.0; glPushMatrix(); glRotatef(angle,1,0,1); }

Icosahedron //initial icosahedron Static float t[20][3][3] = {…}; void display(void) { //clear buffer //set up viewport and frustum if (animation) angle+=0.3; if (angle>360) angle-=360.0; glPushMatrix(); glRotatef(angle,1,0,1); // subdivide each face of the triangle for (int i = 0; i < 20; i++) Subdivide(t[i][0], t[i][1], t[i][2], subdiv); }

Icosahedron //initial icosahedron Static float t[20][3][3] = {…}; void display(void) { //clear buffer //set up viewport and frustum if (animation) angle+=0.3; if (angle>360) angle-=360.0; glPushMatrix(); glRotatef(angle,1,0,1); // subdivide each face of the triangle for (int i = 0; i < 20; i++) Subdivide(t[i][0], t[i][1], t[i][2], subdiv); } glPopMatrix(); glFlush(); glutSwapBuffers();

Icosahedron void Subdivide(GLfloat v1[3], GLfloat v2[3], GLfloat v3[3], int depth) { }

Icosahedron void Subdivide(GLfloat v1[3], GLfloat v2[3], GLfloat v3[3], int depth) { if (depth == 0) { glColor3f(0.5,0.5,0.5); glBegin(GL_TRIANGLES); glVertex3fv(v1); glVertex3fv(v2); glVertex3fv(v3); glEnd(); }

Icosahedron void Subdivide(GLfloat v1[3], GLfloat v2[3], GLfloat v3[3], int depth) { if (depth == 0) { glColor3f(0.5,0.5,0.5); glBegin(GL_TRIANGLES); glVertex3fv(v1); glVertex3fv(v2); glVertex3fv(v3); glEnd(); } else GLfloat v12[3], v23[3], v31[3]; for (int i = 0; i < 3; i++) { v12[i] = (v1[i]+v2[i])/2.0; Normalize(v12); v23[i] = (v2[i]+v3[i])/2.0; Normalize(v23); v31[i] = (v3[i]+v1[i])/2.0; Normalize(v31);

Icosahedron void Subdivide(GLfloat v1[3], GLfloat v2[3], GLfloat v3[3], int depth) { if (depth == 0) { glColor3f(0.5,0.5,0.5); glBegin(GL_TRIANGLES); glVertex3fv(v1); glVertex3fv(v2); glVertex3fv(v3); glEnd(); } else GLfloat v12[3], v23[3], v31[3]; for (int i = 0; i < 3; i++) { v12[i] = (v1[i]+v2[i])/2.0; Normalize(v12); v23[i] = (v2[i]+v3[i])/2.0; Normalize(v23); v31[i] = (v3[i]+v1[i])/2.0; Normalize(v31); Subdivide(v1, v12, v31, depth-1); Subdivide(v2, v23, v12, depth-1); Subdivide(v3, v31, v23, depth-1); Subdivide(v12, v23, v31, depth-1);