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

2. 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)

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

4. 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

5. 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.

6. 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

7. 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

8. 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

9. 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

10. 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

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

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

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

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

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

16. 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

17. 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

18. 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);

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

20. 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); }

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

22. 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 < ; 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?

23. 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 < ; 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?

24. 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 < ; 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?

25. 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); } 

26. 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?

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

28. 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; }

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

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

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

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

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

34. Drawing Primitives

35. Drawing Primitives

36. Drawing Primitives

37. Drawing Primitives

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

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

40. 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

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

42. Icosahedron
Normal Vectors

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

44. 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); }

45. 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); }

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

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

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

49. 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);

50. 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);