CS559: Computer Graphics Lecture 3: Digital Image Representation Li Zhang Spring 2008.
CS559: Computer Graphics
description
Transcript of CS559: Computer Graphics
![Page 1: CS559: Computer Graphics](https://reader035.fdocuments.net/reader035/viewer/2022062305/56814fbb550346895dbd744a/html5/thumbnails/1.jpg)
CS559: Computer Graphics
Lecture 12: OpenGLLi Zhang
Spring 2008
![Page 2: CS559: Computer Graphics](https://reader035.fdocuments.net/reader035/viewer/2022062305/56814fbb550346895dbd744a/html5/thumbnails/2.jpg)
Reading• Redbook
– Ch 1 & 2
![Page 3: CS559: Computer Graphics](https://reader035.fdocuments.net/reader035/viewer/2022062305/56814fbb550346895dbd744a/html5/thumbnails/3.jpg)
So far: 3D Geometry Pipeline
Model Space(Object Space)
World Space Eye Space(View Space)
Rotation Translation
Resizing
Canonical View Space Screen Space (2D)
RotationTranslation
Image Space (pixels)Raster Space
viewworld M
pixelcanonical M
canonicalview M
![Page 4: CS559: Computer Graphics](https://reader035.fdocuments.net/reader035/viewer/2022062305/56814fbb550346895dbd744a/html5/thumbnails/4.jpg)
OpenGL• We have been focused on math description• We’ll move on practical graphics programming for
a week
![Page 5: CS559: Computer Graphics](https://reader035.fdocuments.net/reader035/viewer/2022062305/56814fbb550346895dbd744a/html5/thumbnails/5.jpg)
Modern graphics systems
Display
OpenGLDirect3D…
Photoshop3D MaxSoftimageMayaand ?
nVidiaATI…
Your homework
![Page 6: CS559: Computer Graphics](https://reader035.fdocuments.net/reader035/viewer/2022062305/56814fbb550346895dbd744a/html5/thumbnails/6.jpg)
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.
![Page 7: CS559: Computer Graphics](https://reader035.fdocuments.net/reader035/viewer/2022062305/56814fbb550346895dbd744a/html5/thumbnails/7.jpg)
What can OpenGL do?
wireframe
![Page 8: CS559: Computer Graphics](https://reader035.fdocuments.net/reader035/viewer/2022062305/56814fbb550346895dbd744a/html5/thumbnails/8.jpg)
What can OpenGL do?
Antialised lines
![Page 9: CS559: Computer Graphics](https://reader035.fdocuments.net/reader035/viewer/2022062305/56814fbb550346895dbd744a/html5/thumbnails/9.jpg)
What can OpenGL do?
Depth cue using fog
![Page 10: CS559: Computer Graphics](https://reader035.fdocuments.net/reader035/viewer/2022062305/56814fbb550346895dbd744a/html5/thumbnails/10.jpg)
What can OpenGL do?
Flat-shaded polygons
![Page 11: CS559: Computer Graphics](https://reader035.fdocuments.net/reader035/viewer/2022062305/56814fbb550346895dbd744a/html5/thumbnails/11.jpg)
What can OpenGL do?
Lighting and smooth-shaded polygons
![Page 12: CS559: Computer Graphics](https://reader035.fdocuments.net/reader035/viewer/2022062305/56814fbb550346895dbd744a/html5/thumbnails/12.jpg)
What can OpenGL do?
Texturemap and shadow
![Page 13: CS559: Computer Graphics](https://reader035.fdocuments.net/reader035/viewer/2022062305/56814fbb550346895dbd744a/html5/thumbnails/13.jpg)
What can OpenGL do?
Motion blur
![Page 14: CS559: Computer Graphics](https://reader035.fdocuments.net/reader035/viewer/2022062305/56814fbb550346895dbd744a/html5/thumbnails/14.jpg)
What can OpenGL do?
View point change
![Page 15: CS559: Computer Graphics](https://reader035.fdocuments.net/reader035/viewer/2022062305/56814fbb550346895dbd744a/html5/thumbnails/15.jpg)
What can OpenGL do?
Smoke
![Page 16: CS559: Computer Graphics](https://reader035.fdocuments.net/reader035/viewer/2022062305/56814fbb550346895dbd744a/html5/thumbnails/16.jpg)
What can OpenGL do?
Depth of field
![Page 17: CS559: Computer Graphics](https://reader035.fdocuments.net/reader035/viewer/2022062305/56814fbb550346895dbd744a/html5/thumbnails/17.jpg)
Hello, world
#include <whateverYouNeed.h> 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();}
#include <whateverYouNeed.h> 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();}
![Page 18: CS559: Computer Graphics](https://reader035.fdocuments.net/reader035/viewer/2022062305/56814fbb550346895dbd744a/html5/thumbnails/18.jpg)
OpenGL syntax
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
GL_ for constants
glColor3f(1.0, 1.0, 1.0);
gl prefix for all commands
glColor3d(1.0, 1.0, 1.0); glColor3s(1, 1, 1); glColor3i(1, 1, 1); ……
![Page 19: CS559: Computer Graphics](https://reader035.fdocuments.net/reader035/viewer/2022062305/56814fbb550346895dbd744a/html5/thumbnails/19.jpg)
OpenGL syntax
glColor3f(1.0, 0.0, 0.0);
float color_array[] = {1.0, 0.0, 0.0};glColor3fv(color_array);
glVertex2i(1, 1);
glVertex2f(1.0, 1.0);
glColor3f(1.0, 0.0, 0.0);
glColor3ub(255, 0, 0);
![Page 20: CS559: Computer Graphics](https://reader035.fdocuments.net/reader035/viewer/2022062305/56814fbb550346895dbd744a/html5/thumbnails/20.jpg)
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 ();
}
#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 ();
}
![Page 21: CS559: Computer Graphics](https://reader035.fdocuments.net/reader035/viewer/2022062305/56814fbb550346895dbd744a/html5/thumbnails/21.jpg)
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);
}
#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);}
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);}
![Page 22: CS559: Computer Graphics](https://reader035.fdocuments.net/reader035/viewer/2022062305/56814fbb550346895dbd744a/html5/thumbnails/22.jpg)
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; }
#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 ();
}
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 ();
}
![Page 23: CS559: Computer Graphics](https://reader035.fdocuments.net/reader035/viewer/2022062305/56814fbb550346895dbd744a/html5/thumbnails/23.jpg)
Animation
open_window(); for (i = 0; i < 1000000; i++) { clear_the_window(); draw_frame(i); wait_until_a_24th_of_a_second_is_over(); }
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?
![Page 24: CS559: Computer Graphics](https://reader035.fdocuments.net/reader035/viewer/2022062305/56814fbb550346895dbd744a/html5/thumbnails/24.jpg)
Animation
open_window(); for (i = 0; i < 1000000; i++) { clear_the_window(); draw_frame(i); wait_until_a_24th_of_a_second_is_over(); }
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?
![Page 25: CS559: Computer Graphics](https://reader035.fdocuments.net/reader035/viewer/2022062305/56814fbb550346895dbd744a/html5/thumbnails/25.jpg)
Animation
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(); }
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?
![Page 26: CS559: Computer Graphics](https://reader035.fdocuments.net/reader035/viewer/2022062305/56814fbb550346895dbd744a/html5/thumbnails/26.jpg)
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);
}
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);
}
void init(void) { glClearColor (0.0, 0.0, 0.0, 0.0); glShadeModel (GL_FLAT);
}
![Page 27: CS559: Computer Graphics](https://reader035.fdocuments.net/reader035/viewer/2022062305/56814fbb550346895dbd744a/html5/thumbnails/27.jpg)
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);
}
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();
}
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();
}
![Page 28: CS559: Computer Graphics](https://reader035.fdocuments.net/reader035/viewer/2022062305/56814fbb550346895dbd744a/html5/thumbnails/28.jpg)
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);glutReshapeFunc(reshape);
}
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);
}
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); break;
default: break;
}}
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); break;
default: break;
}}
spinDisplay(void){ spin = spin + 2.0; if (spin > 360.0) spin -= 360.0; glutPostRedisplay();
}
spinDisplay(void){ spin = spin + 2.0; if (spin > 360.0) spin -= 360.0; glutPostRedisplay();
}
![Page 29: CS559: Computer Graphics](https://reader035.fdocuments.net/reader035/viewer/2022062305/56814fbb550346895dbd744a/html5/thumbnails/29.jpg)
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);glutReshapeFunc(reshape);
glutMainLoop(); return 0;}
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;}
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();
}
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();
}
![Page 30: CS559: Computer Graphics](https://reader035.fdocuments.net/reader035/viewer/2022062305/56814fbb550346895dbd744a/html5/thumbnails/30.jpg)
Event-Driven Programming
Window management libraryGLUT / FLTK Window management libraryGLUT / FLTK Events: key strokes, mouse clicksEvents: key strokes, mouse clicks
Event handlers:mouse(), display(), reshape()
Event handlers:mouse(), display(), reshape()
![Page 31: CS559: Computer Graphics](https://reader035.fdocuments.net/reader035/viewer/2022062305/56814fbb550346895dbd744a/html5/thumbnails/31.jpg)
Viewportvoid reshape (int w, int h) {
glViewport (0, 0, w, h); glMatrixMode (GL_PROJECTION);glLoadIdentity (); gluOrtho2D (0.0, w, 0.0, h);
}
void reshape (int w, int h) { glViewport (0, 0, w, h); glMatrixMode (GL_PROJECTION);glLoadIdentity (); gluOrtho2D (0.0, w, 0.0, h);
}
![Page 32: CS559: Computer Graphics](https://reader035.fdocuments.net/reader035/viewer/2022062305/56814fbb550346895dbd744a/html5/thumbnails/32.jpg)
Points, lines, and polygons• Points• Lines
• Polygons
Simple Polygonss: Convex & planar
Nonplanar Polygon Transformed to Nonsimple Polygon
![Page 33: CS559: Computer Graphics](https://reader035.fdocuments.net/reader035/viewer/2022062305/56814fbb550346895dbd744a/html5/thumbnails/33.jpg)
Drawing Primitives
glBegin(GL_POLYGON); glVertex2f(0.0, 0.0); glVertex2f(0.0, 3.0); glVertex2f(4.0, 3.0); glVertex2f(6.0, 1.5); glVertex2f(4.0, 0.0); glEnd();
glBegin(GL_POLYGON); glVertex2f(0.0, 0.0); glVertex2f(0.0, 3.0); glVertex2f(4.0, 3.0); glVertex2f(6.0, 1.5); glVertex2f(4.0, 0.0); glEnd();
![Page 34: CS559: Computer Graphics](https://reader035.fdocuments.net/reader035/viewer/2022062305/56814fbb550346895dbd744a/html5/thumbnails/34.jpg)
Drawing Primitives
glBegin(GL_POINTS); glVertex2f(0.0, 0.0); glVertex2f(0.0, 3.0); glVertex2f(4.0, 3.0); glVertex2f(6.0, 1.5); glVertex2f(4.0, 0.0); glEnd();
glBegin(GL_POINTS); glVertex2f(0.0, 0.0); glVertex2f(0.0, 3.0); glVertex2f(4.0, 3.0); glVertex2f(6.0, 1.5); glVertex2f(4.0, 0.0); glEnd();
![Page 35: CS559: Computer Graphics](https://reader035.fdocuments.net/reader035/viewer/2022062305/56814fbb550346895dbd744a/html5/thumbnails/35.jpg)
Drawing Primitives
![Page 36: CS559: Computer Graphics](https://reader035.fdocuments.net/reader035/viewer/2022062305/56814fbb550346895dbd744a/html5/thumbnails/36.jpg)
Drawing Primitives
![Page 37: CS559: Computer Graphics](https://reader035.fdocuments.net/reader035/viewer/2022062305/56814fbb550346895dbd744a/html5/thumbnails/37.jpg)
Drawing Primitives
![Page 38: CS559: Computer Graphics](https://reader035.fdocuments.net/reader035/viewer/2022062305/56814fbb550346895dbd744a/html5/thumbnails/38.jpg)
Drawing Primitives
![Page 39: CS559: Computer Graphics](https://reader035.fdocuments.net/reader035/viewer/2022062305/56814fbb550346895dbd744a/html5/thumbnails/39.jpg)
Primitive Details• glPointSize(GLfloat size)
– Approximate the point by squares for anti-aliasing
glEnable(GL_POINT_SMOOTH); glEnable(GL_POINT_SMOOTH);
![Page 40: CS559: Computer Graphics](https://reader035.fdocuments.net/reader035/viewer/2022062305/56814fbb550346895dbd744a/html5/thumbnails/40.jpg)
Primitive Details• glLineWidth(GLfloat width)
– Approximate the line by a rectangle for anti-aliasing
glEnable (GL_LINE_SMOOTH); glLineWidth (1.5);
glEnable (GL_LINE_SMOOTH); glLineWidth (1.5);
![Page 41: CS559: Computer Graphics](https://reader035.fdocuments.net/reader035/viewer/2022062305/56814fbb550346895dbd744a/html5/thumbnails/41.jpg)
• glPolygonMode(GLenum face, GLenum mode); – face: GL_FRONT, GL_BACK– mode: GL_POINT, GL_LINE, GL_FILL
Primitive Details
glPolygonMode(GL_FRONT, GL_FILL);glRectf(0, 0, 100, 100);
glPolygonMode(GL_FRONT, GL_FILL);glRectf(0, 0, 100, 100);
glPolygonMode(GL_FRONT, GL_LINE);glRectf(0, 0, 100, 100);
glPolygonMode(GL_FRONT, GL_LINE);glRectf(0, 0, 100, 100);