15-462 Computer Graphics I Lecture 2
Basic Graphics Programming
Basic Graphics Programming
Graphics Pipeline
Graphics Pipeline
OpenGL API
OpenGL API
Primitives: Lines, Polygons
Primitives: Lines, Polygons
Attributes: Color
Attributes: Color
Example
Example
[Angel Ch. 2]
[Angel Ch. 2]
January 16, 2003
Frank Pfenning
Carnegie Mellon University
http://www.cs.cmu.edu/~fp/courses/graphics/
A Graphics Pipeline
A Graphics Pipeline
• Pipelines and parallelism
• Latency vs throughput
• Efficiently implementable in hardware
• Notsoefficientlyimplementableinsoftware
01/16/2003 15-462 Graphics I 2
Programming a Pipeline
Programming a Pipeline
• Specify the operation of each box • Replace or accumulate
• State and lack of modularity
• Immediate mode graphics
– On-line (OpenGL)
• Modeling-rendering pipeline – Off-line (Pixar’s Renderman)
01/16/2003 15-462 Graphics I 3
Vertices
Vertices
• Vertices in world coordinates
• voidglVertex3f(GLfloatx,GLfloaty,GLfloatz) – Vertex (x, y, z) sent down the pipeline
– Function call returns
• Use GLtype for portability and consistency • glVertex{234}{sfid}[v](TYPEcoords)
01/16/2003 15-462 Graphics I 4
Transformer
Transformer
• Transformer in world coordinates
• Mustbesetbeforeobjectisdrawn!
glRotatef(45.0, 0.0, 0.0, -1.0); glVertex2f(1.0, 0.0);
• Complex [Angel Ch. 4]
01/16/2003 15-462 Graphics I 5
Clipper
Clipper
• Mostlyautomaticfromviewport
01/16/2003 15-462 Graphics I 6
Projector
Projector
• Complextransformation[AngelCh.5]
Orthographic
01/16/2003 15-462 Graphics I
Perspective
7
Rasterizer
Rasterizer
• Interestingalgorithms[AngelCh.7] • To window coordinates
01/16/2003 15-462 Graphics I 8
Outline
Outline
1. AGraphicsPipeline
2. TheOpenGLAPI
3. Primitives:vertices,lines,polygons 4. Attributes:color
5. Example:drawingashadedtriangle
01/16/2003 15-462 Graphics I 9
OpenGL Library Organization
OpenGL Library Organization
• GLU (OpenGL Utility Library), modeling
• GLUT(GLUtilityToolkit),windowsystem interface
01/16/2003 15-462 Graphics I 10
Graphics Functions
Graphics Functions
• Primitive functions
• Attributefunctions
• Transformationfunctions • Viewing functions
• Inputfunctions
• Control functions
01/16/2003 15-462 Graphics I 11
Outline
Outline
1. AGraphicsPipeline
2. TheOpenGLAPI
3. Primitives:vertices,lines,polygons 4. Attributes:color
5. Example:drawingashadedtriangle
01/16/2003 15-462 Graphics I 12
Primitives
Primitives
• Specified via vertices • General schema
glBegin(type); glVertex*(…); … glVertex*(…);
glEnd();
• typedeterminesinterpretationofvertices
01/16/2003 15-462 Graphics I 13
Example: Square Outline
Example: Square Outline
• Type GL_LINE_LOOP
glBegin(GL_LINE_LOOP); glVertex2f(0.0, 0.0); glVertex2f(1.0, 0.0); glVertex2f(1.0, 1.0); glVertex2f(0.0, 1.0);
glEnd();
• zcoordinatedefaultsto0
• Callstootherfunctionsareallowedbetween
glBegin(type) and glEnd();
01/16/2003 15-462 Graphics I 14
Points and Line Segments
Points and Line Segments
• Makesenseinthreedimensions
01/16/2003 15-462 Graphics I 15
Polygons
Polygons
• Polygons enclose an area
• Rendering of area (fill) depends on attributes • All vertices must be in one plane
01/16/2003 15-462 Graphics I 16
Polygon Restrictions
Polygon Restrictions
• OpenGLPolygonsmustbesimple • OpenGLPolygonsmustbeconvex
(a) simple, but not convex
convex
(b) non-simple
01/16/2003 15-462 Graphics I 17
Why Polygon Restrictions?
Why Polygon Restrictions?
• Non-convex and non-simple polygons are expensive to process and render
• Convexity and simplicity is expensive to test
• BehaviorofOpenGLimplementationon
disallowed polygons is “undefined”
• SometoolsinGLUfordecomposingcomplex
polygons (tessellation)
• Trianglesaremostefficient
01/16/2003 15-462 Graphics I 18
Polygon Strips
Polygon Strips
• Efficiencyinspaceandtime • Reduces visual artefacts
• Polygons have a front and a back, possibly with different attributes!
01/16/2003 15-462 Graphics I 19
Outline
Outline
1. AGraphicsPipeline
2. TheOpenGLAPI
3. Primitives:vertices,lines,polygons 4. Attributes:color
5. Example:drawingashadedtriangle
01/16/2003 15-462 Graphics I 20
Attributes
Attributes
• Partofthestateofthegraphicspipeline • Set before primitives are drawn
• Remain in effect!
• Examples:
– Color, including transparency – Reflection properties
– Shading properties
01/16/2003 15-462 Graphics I 21
Physics of Color
Physics of Color
• Electromagnetic radiation
• Canseeonlytinypieceofthespectrum
01/16/2003 15-462 Graphics I 22
Color Filters
Color Filters
• Eye can perceive only 3 basic colors
• Computerscreensdesignedaccordingly
GR
Amplitude
B
01/16/2003
15-462 Graphics I 23
Color Spaces
Color Spaces
• RGB(Red,Green,Blue)
– Convenient for display
– Can be unintuitive (3 floats in OpenGL)
• HSV(Hue,Saturation,Value)
– Hue: what color
– Saturation: how far away from gray – Value: how bright
• Othersformoviesandprinting
01/16/2003 15-462 Graphics I 24
RGB vs HSV
RGB vs HSV
Apple Color Picker
BG
V
G
B
HS
25
R
R
R
01/16/2003
G
B
15-462 Graphics I
Outline
Outline
1. AGraphicsPipeline
2. TheOpenGLAPI
3. Primitives:vertices,lines,polygons 4. Attributes:color
5. Example:drawingashadedtriangle
01/16/2003 15-462 Graphics I 26
Example: Drawing a shaded polygon
Example: Drawing a shaded polygon
• Initialization:the“main”function
int main(int argc, char** argv) {
glutInit(&argc, argv);
glutInitDisplayMode (GLUT_SINGLE | GLUT_RGB); glutInitWindowSize (500, 500); glutInitWindowPosition (100, 100); glutCreateWindow (argv[0]);
init ();
…
01/16/2003 15-462 Graphics I 27
GLUT Callbacks
GLUT Callbacks
• Window system independent interaction • glutMainLoop processes events
…
glutDisplayFunc(display); glutReshapeFunc(reshape); glutKeyboardFunc (keyboard); glutMainLoop();
return 0;
} 01/16/2003
15-462 Graphics I 28
Initializing Attributes
Initializing Attributes
• Separate in “init” function
void init(void) {
glClearColor (0.0, 0.0, 0.0, 0.0);
/* glShadeModel (GL_FLAT); */
glShadeModel (GL_SMOOTH); }
01/16/2003
15-462 Graphics I 29
The Display Callback
The Display Callback
• Handles exposure events
• Install with glutDisplayFunc(display)
void display(void) {
glClear (GL_COLOR_BUFFER_BIT); /* clear buffer */
triangle (); glFlush ();
/* draw triangle */ /* force display */
}
01/16/2003
15-462 Graphics I 30
Drawing
Drawing
• In world coordinates; remember state!
void triangle(void) {
glBegin (GL_TRIANGLES); glColor3f (1.0, 0.0, 0.0); /* red */ glVertex2f (5.0, 5.0);
glColor3f (0.0, 1.0, 0.0); /* green */ glVertex2f (25.0, 5.0);
glColor3f (0.0, 0.0, 1.0); /* blue */ glVertex2f (5.0, 25.0);
glEnd(); }
01/16/2003 15-462 Graphics I 31
The Image
The Image
• Color of last vertex with flat shading glShadeModel(GL_FLAT) glShadeModel(GL_SMOOTH)
01/16/2003 15-462 Graphics I 32
Preview: Smooth Shading
Preview: Smooth Shading
• Approximatingasphere
Flat Shading Smooth Shading
01/16/2003 15-462 Graphics I 33
Projection
Projection
• Mappingworldtoscreencoordinates
void reshape(int w, int h) {
glViewport (0, 0, (GLsizei) w, (GLsizei) h); glMatrixMode (GL_PROJECTION); glLoadIdentity ();
if (w <= h)
gluOrtho2D (0.0, 30.0, 0.0, 30.0 * (GLfloat) h/(GLfloat) w); else
gluOrtho2D (0.0, 30.0 * (GLfloat) w/(GLfloat) h, 0.0, 30.0); glMatrixMode(GL_MODELVIEW);
}
01/16/2003 15-462 Graphics I 34
Viewport
Viewport
• Determines clipping in window coordinates • glViewPort(x,y,w,h)
01/16/2003 15-462 Graphics I 35
Orthographic Projection
Orthographic Projection
• 2D and 3D versions
• glOrtho2D(left, right, bottom, top) • In world coordinates!
01/16/2003 15-462 Graphics I 36
Summary
Summary
1. AGraphicsPipeline
2. TheOpenGLAPI
3. Primitives:vertices,lines,polygons 4. Attributes:color
5. Example:drawingashadedtriangle
01/16/2003 15-462 Graphics I 37
Reminder
Reminder
• ProgrammingAssignment1outtoday
• Due in two weeks
• Compilationinstructionsoncoursepage together with assignment
• Carefullyfollowaccountsetupinstructionsfor graphics lab (WeH 5336)
01/16/2003 15-462 Graphics I 38