The document provides an overview of OpenGL and computer graphics concepts. It discusses the basics of computer graphics including applications, the graphics pipeline, primitives like vertices and polygons, attributes like color, and an example of drawing a shaded triangle. The graphics pipeline involves steps like vertex operations, primitive assembly, rasterization, and fragment operations. Primitives are specified using vertices and attributes remain in effect until changed. The OpenGL API is used to program 3D graphics and interfaces with the graphics driver.
1. OpenGL &
Computer Graphics Basic
http://www.learncax.com/
Centre for Computational Technologies
CCTech Recruitment Brochure Simulation is The Future!
2. Outline
1. Introduction to Computer Graphics
2. Computer Graphics Applications
3. A Graphics Pipeline
4. The OpenGL API
5. Primitives: vertices, lines, polygons
6. Attributes: color
7. Example: drawing a shaded triangle
Centre for Computational Technologies
OpenGL Simulation is The Future!
3. Textbook
OpenGL Programming
Guide, Fourth Edition: The
Official Guide to Learning
OpenGL, Version 1.5, by Woo
et al., Addison Wesley, ISBN:
0201604582.
Centre for Computational Technologies
OpenGL Simulation is The Future!
4. Basic goal
• Teach you the fundamentals for writing your own
graphics applications
Centre for Computational Technologies
OpenGL Simulation is The Future!
5. Evolution
Centre for Computational Technologies
OpenGL Simulation is The Future!
6. PC Architecture
Centre for Computational Technologies
OpenGL Simulation is The Future!
7. Programming Graphics Applications
• The application is programmed to the 3D graphics API and
links with the driver at runtime
Centre for Computational Technologies
OpenGL Simulation is The Future!
8. The Graphics Pipeline
Centre for Computational Technologies
OpenGL Simulation is The Future!
9. The Graphics Pipeline
Centre for Computational Technologies
OpenGL Simulation is The Future!
10. The Graphics Pipeline
SolidWorks:
define software behavior
user input events
Software logic
CAD operations
Centre for Computational Technologies
OpenGL Simulation is The Future!
11. The Graphics Pipeline
SolidWorks:
send OpenGL commands
OpenGL driver:
process GL command stream
talk to GPU
Centre for Computational Technologies
OpenGL Simulation is The Future!
12. The Graphics Pipeline
Centre for Computational Technologies
OpenGL Simulation is The Future!
13. The Graphics Pipeline
Centre for Computational Technologies
OpenGL Simulation is The Future!
14. The Graphics Pipeline
Centre for Computational Technologies
OpenGL Simulation is The Future!
15. The Graphics Pipeline
Centre for Computational Technologies
OpenGL Simulation is The Future!
16. Rasterization vs. Ray Tracing
Centre for Computational Technologies
OpenGL Simulation is The Future!
17. Rasterization vs. Ray Tracing
• Rasterization:
• for each object ...
– for each pixel ...
• Ray tracing:
• for each pixel ...
– for each object ...
Centre for Computational Technologies
OpenGL Simulation is The Future!
18. Outline
1. Introduction to Computer Graphics
2. Computer Graphics Applications
3. A Graphics Pipeline
4. The OpenGL API
5. Primitives: vertices, lines, polygons
6. Attributes: color
7. Example: drawing a shaded triangle
Centre for Computational Technologies
OpenGL Simulation is The Future!
19. Computer Graphics Applications
• Computer Aided Design
• Computer Aided Manufacturing
• Architecture
• Simulation
• Virtual Reality
• Visualization
• Games
• Movies
• Medical Imaging
Centre for Computational Technologies
OpenGL Simulation is The Future!
20. Computer Aided Design (CAD)
Centre for Computational Technologies
OpenGL Simulation is The Future!
21. Movies
Centre for Computational Technologies
OpenGL Simulation is The Future!
22. Games
Centre for Computational Technologies
OpenGL Simulation is The Future!
23. Visualization
Centre for Computational Technologies
OpenGL Simulation is The Future!
24. Virtual and Augmented Reality
Centre for Computational Technologies
OpenGL Simulation is The Future!
25. Mobile Media
Centre for Computational Technologies
OpenGL Simulation is The Future!
26. New Information Spaces
Centre for Computational Technologies
OpenGL Simulation is The Future!
27. Outline
1. Introduction to Computer Graphics
2. Computer Graphics Applications
3. A Graphics Pipeline
4. The OpenGL API
5. Primitives: vertices, lines, polygons
6. Attributes: color
7. Example: drawing a shaded triangle
Centre for Computational Technologies
OpenGL Simulation is The Future!
28. 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)
Centre for Computational Technologies
OpenGL Simulation is The Future!
29. Vertex
• Vertices in world coordinates
• void glVertex3f(GLfloat x, GLfloat y, GLfloat z)
– Vertex (x, y, z) sent down the pipeline
– Function call returns
• Use GLtype for portability and consistency
– glVertex{234}{sfid}[v](TYPE coords)
Centre for Computational Technologies
OpenGL Simulation is The Future!
30. Transformer
• Transformer in world coordinates
• Must be set before object is drawn!
– glRotatef(45.0, 0.0, 0.0, -1.0);
– glVertex2f(1.0, 0.0);
Centre for Computational Technologies
OpenGL Simulation is The Future!
31. Clipper
• Mostly automatic from viewport
Centre for Computational Technologies
OpenGL Simulation is The Future!
32. Projector
Orthographic Perspective
Centre for Computational Technologies
OpenGL Simulation is The Future!
33. Rasterizer
• Interesting algorithms
• To window coordinates
Centre for Computational Technologies
OpenGL Simulation is The Future!
34. The OpenGL Vertex Pipeline
Centre for Computational Technologies
OpenGL Simulation is The Future!
35. OpenGL shaded-quad code
glClearColor(1, 1, 1, 1); // white
glClear(GL_COLOR_BUFFER_BIT);
glLoadIdentity();
glOrtho(0, 100, 0, 100, -1, 1);
glBegin(GL_TRIANGLE_STRIP);
glColor3f(0, 0.5, 0); // dark green
glVertex2i(11, 31);
glVertex2i(37, 71);
glColor3f(0.5, 0, 0); // dark red
glVertex2i(91, 38);
glVertex2i(65, 71);
glEnd();
glFlush();
Centre for Computational Technologies
OpenGL Simulation is The Future!
36. OpenGL vertex pipeline
Application
Emphasis is on data types
Diagram ignores Vertex assembly
– Pixel pipeline
– Texture memory Vertex operations
– Display lists
Primitive assembly
– …
Display is not part of OpenGL Primitive operations
Rasterization
Fragment operations
Framebuffer
Display
Centre for Computational Technologies
OpenGL Simulation is The Future!
37. Vertex assembly (data types)
Application
struct {
Vertex assembly
float x,y,z,w;
float r,g,b,a;
Vertex operations
} vertex;
Primitive assembly
Primitive operations
Rasterization
Fragment operations
Framebuffer
Display
Centre for Computational Technologies
OpenGL Simulation is The Future!
38. Vertex assembly (OpenGL)
Vertex assembly Application
– Force input to canonical format
• Convert to internal representation Vertex assembly
– E.g., x, y to float
• Initialize unspecified values
Vertex operations
– E.g., z = 0, w=1
• Insert current modal state
– E.g., color to 0,0.5,0,1 Primitive assembly
– Or create using evaluators
Error detection Primitive operations
– INVALID_ENUM
– INVALID_VALUE Rasterization
– INVALID_OPERATION
• Especially between Begin and End
Fragment operations
Framebuffer
Display
Centre for Computational Technologies
OpenGL Simulation is The Future!
40. Vertex operations
Application
OpenGL
– Transform coordinates Vertex assembly
• 4x4 matrix arithmetic
– Compute (vertex) lighting Vertex operations
– Compute texture coordinates
Primitive assembly
– …
In our case: Primitive operations
– Scale (arbitrary 100x100) coordinates to fit
window Rasterization
– No lighting, no texture coordinates
Fragment operations
Framebuffer
Display
Centre for Computational Technologies
OpenGL Simulation is The Future!
41. Primitive assembly (data types)
Application
struct {
Vertex assembly
float x,y,z,w;
float r,g,b,a;
Vertex operations
} vertex;
struct { Primitive assembly
vertex v0,v1,v2;
Primitive operations
} triangle;
or
Rasterization
struct {
vertex v0,v1; Fragment operations
} line;
or Framebuffer
struct {
vertex v0; Display
} point; Centre for Computational Technologies
OpenGL Simulation is The Future!
42. Primitive assembly
OpenGL Application
– Group vertexes into primitives:
• points, Vertex assembly
• lines, or
• triangles Vertex operations
– Decompose polygons to triangles
– Duplicate vertexes in strips or fans Primitive assembly
In our case:
– Create two triangles from a strip: Primitive operations
Rasterization
1 3 Fragment operations
glBegin(GL_TRIANGLE_STRIP);
glColor(green);
glVertex2i(…); // 0
glVertex2i(…); // 1 Framebuffer
glColor(red);
glVertex2i(…); // 2
glVertex2i(…); // 3
glEnd(); 2 Display
0 Centre for Computational Technologies
OpenGL Simulation is The Future!
43. Primitive operations
Application
OpenGL
– Clip to the window boundaries Vertex assembly
• Actually to the frustum surfaces
– Perform back-face / front-face ops Vertex operations
• Culling
• Color assignment for 2-side lighting Primitive assembly
In our case
Primitive operations
– Nothing happens
Rasterization
Fragment operations
Framebuffer
Display
Centre for Computational Technologies
OpenGL Simulation is The Future!
44. Rasterization (data types)
Application
struct {
Vertex assembly
float x,y,z,w;
float r,g,b,a;
Vertex operations
} vertex;
struct { Primitive assembly
vertex v0,v1,v2
Primitive operations
} triangle;
struct { Rasterization
short int x,y;
float depth; Fragment operations
float r,g,b,a;
} fragment; Framebuffer
Display
Centre for Computational Technologies
OpenGL Simulation is The Future!
45. Rasterization
Application
OpenGL
– Determine which pixels are included in the Vertex assembly
primitive
• Generate a fragment for each such pixel Vertex operations
– Assign attributes (e.g., color) to each
fragment Primitive assembly
In our case:
Primitive operations
Rasterization
Fragment operations
Framebuffer
Display
Centre for Computational Technologies
OpenGL Simulation is The Future!
46. Fragment operations
Application
OpenGL
– Texture mapping Vertex assembly
– Fragment lighting (OpenGL 2.0)
– Fog Vertex operations
– Scissor test
Primitive assembly
– Alpha test
In our case, nothing happens: Primitive operations
Rasterization
Fragment operations
Framebuffer
Display
Centre for Computational Technologies
OpenGL Simulation is The Future!
47. Outline
1. Introduction to Computer Graphics
2. Computer Graphics Applications
3. A Graphics Pipeline
4. The OpenGL API
5. Primitives: vertices, lines, polygons
6. Attributes: color
7. Example: drawing a shaded triangle
Centre for Computational Technologies
OpenGL Simulation is The Future!
48. Outline
1. Introduction to Computer Graphics
2. Computer Graphics Applications
3. A Graphics Pipeline
4. The OpenGL API
5. Primitives: vertices, lines, polygons
6. Attributes: color
7. Example: drawing a shaded triangle
Centre for Computational Technologies
OpenGL Simulation is The Future!
49. OpenGL Library Organization
• GLU (OpenGL Utility Library), modeling
• GLUT (GL Utility Toolkit), window system interface
Centre for Computational Technologies
OpenGL Simulation is The Future!
50. Graphics Functions
• Primitive functions
• Attribute functions
• Transformation functions
• Viewing functions
• Input functions
• Control functions
Centre for Computational Technologies
OpenGL Simulation is The Future!
51. Outline
1. Introduction to Computer Graphics
2. Computer Graphics Applications
3. A Graphics Pipeline
4. The OpenGL API
5. Primitives: vertices, lines, polygons
6. Attributes: color
7. Example: drawing a shaded triangle
Centre for Computational Technologies
OpenGL Simulation is The Future!
52. Primitives
• Specified via vertices
• General schema
glBegin(type);
glVertex*(...);
...
glVertex*(...);
glEnd();
• type determines interpretation of vertices
Centre for Computational Technologies
OpenGL Simulation is The Future!
53. 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();
• z coordinate defaults to 0
• Calls to other functions are allowed between
glBegin(type) and glEnd();
Centre for Computational Technologies
OpenGL Simulation is The Future!
54. Points and Line Segments
• Make sense in three dimensions
Centre for Computational Technologies
OpenGL Simulation is The Future!
55. Polygons
• Polygons enclose an area
• Rendering of area (fill) depends on attributes
• All vertices must be in one plane
Centre for Computational Technologies
OpenGL Simulation is The Future!
56. Polygon Restrictions
• OpenGL Polygons must be simple
• OpenGL Polygons must be convex
(a) simple, but not convex
convex
(b) non-simple
Centre for Computational Technologies
OpenGL Simulation is The Future!
57. Why Polygon Restrictions?
• Non-convex and non-simple polygons are
expensive to process and render
• Convexity and simplicity is expensive to test
• Behavior of OpenGL implementation on
disallowed polygons is “undefined”
• Some tools in GLU for decomposing complex polygons
(tessellation)
• Triangles are most efficient
Centre for Computational Technologies
OpenGL Simulation is The Future!
58. Polygon Strips
• Efficiency in space and time
• Reduces visual artefacts
• Polygons have a front and a back, possibly with
different attributes!
Centre for Computational Technologies
OpenGL Simulation is The Future!
59. Outline
1. Introduction to Computer Graphics
2. Computer Graphics Applications
3. A Graphics Pipeline
4. The OpenGL API
5. Primitives: vertices, lines, polygons
6. Attributes: color
7. Example: drawing a shaded triangle
Centre for Computational Technologies
OpenGL Simulation is The Future!
60. Attributes
• Part of the state of the graphics pipeline
• Set before primitives are drawn
• Remain in effect!
• Examples:
– Color, including transparency
– Reflection properties
– Shading properties
Centre for Computational Technologies
OpenGL Simulation is The Future!
61. 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
• Others for movies and printing
Centre for Computational Technologies
OpenGL Simulation is The Future!
62. Outline
1. Introduction to Computer Graphics
2. Computer Graphics Applications
3. A Graphics Pipeline
4. The OpenGL API
5. Primitives: vertices, lines, polygons
6. Attributes: color
7. Example: drawing a shaded triangle
Centre for Computational Technologies
OpenGL Simulation is The Future!
63. 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 ();
glutDisplayFunc(display);
glutReshapeFunc(reshape);
glutKeyboardFunc (keyboard);
glutMainLoop();
return 0;
}
Centre for Computational Technologies
OpenGL Simulation is The Future!
64. GLUT Callbacks
• Window system independent interaction
• glutDisplayFunc(display);
• glutReshapeFunc(reshape);
• glutKeyboardFunc (keyboard);
• glutMainLoop processes events
Centre for Computational Technologies
OpenGL Simulation is The Future!
65. Initializing Attributes
• Separate in “init” function
void init(void)
{
glClearColor (0.0, 0.0, 0.0, 0.0);
/* glShadeModel (GL_FLAT); */
glShadeModel (GL_SMOOTH);
}
Centre for Computational Technologies
OpenGL Simulation is The Future!
66. The Display Callback
• Handles exposure events
• Install with glutDisplayFunc(display)
void display(void)
{
glClear (GL_COLOR_BUFFER_BIT); /* clear buffer */
triangle (); /* draw triangle */
glFlush (); /* force display */
}
Centre for Computational Technologies
OpenGL Simulation is The Future!
67. 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();
}
Centre for Computational Technologies
OpenGL Simulation is The Future!
68. The Image
• Color of last vertex with flat shading
glShadeModel(GL_FLAT) glShadeModel(GL_SMOOTH)
Centre for Computational Technologies
OpenGL Simulation is The Future!
69. Smooth Shading
• Approximating a sphere
Flat Shading Smooth Shading
Centre for Computational Technologies
OpenGL Simulation is The Future!
70. Projection
• Mapping world to screen coordinates
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);
}
Centre for Computational Technologies
OpenGL Simulation is The Future!
71. Viewport
• Determines clipping in window coordinates
• glViewPort(x, y, w, h)
Centre for Computational Technologies
OpenGL Simulation is The Future!
72. Orthographic Projection
• 2D and 3D versions
• glOrtho2D(left, right, bottom, top)
• In world coordinates!
Centre for Computational Technologies
OpenGL Simulation is The Future!
73. Outline
1. Introduction to Computer Graphics
2. Computer Graphics Applications
3. A Graphics Pipeline
4. The OpenGL API
5. Primitives: vertices, lines, polygons
6. Attributes: color
7. Example: drawing a shaded triangle
Centre for Computational Technologies
OpenGL Simulation is The Future!
74. Reminder
• Programming Assignment 1 out today
• Due in two weeks
• Compilation instructions on course page together with
assignment
Centre for Computational Technologies
OpenGL Simulation is The Future!
75. Questions?
Centre for Computational Technologies
OpenGL Simulation is The Future!