OpenGL Basics

OpenGL &
Computer Graphics Basic

http://www.learncax.com/

Centre for Computational Technologies
CCTech Recruitment Brochure Simulation is The Future!

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

OpenGL Simulation is The Future!

Textbook

OpenGL Programming
Guide, Fourth Edition: The
Official Guide to Learning
OpenGL, Version 1.5, by Woo
et al., Addison Wesley, ISBN:
0201604582.


Basic goal
• Teach you the fundamentals for writing your own
graphics applications


Evolution


PC Architecture


Programming Graphics Applications
• The application is programmed to the 3D graphics API and
links with the driver at runtime


The Graphics Pipeline


 SolidWorks:
 define software behavior
 user input events
 Software logic
 CAD operations



 SolidWorks:
 send OpenGL commands

 OpenGL driver:
 process GL command stream
 talk to GPU


Rasterization vs. Ray Tracing


Rasterization vs. Ray Tracing
• Rasterization:
• for each object ...
– for each pixel ...

• Ray tracing:
• for each pixel ...
– for each object ...


Computer Graphics Applications
• Computer Aided Design
• Computer Aided Manufacturing
• Architecture
• Simulation
• Virtual Reality
• Visualization
• Games
• Movies 
• Medical Imaging


Computer Aided Design (CAD)


Movies


Games


Visualization


Virtual and Augmented Reality


Mobile Media


New Information Spaces


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)


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)


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


Clipper

• Mostly automatic from viewport


Projector

Orthographic Perspective


Rasterizer

• Interesting algorithms
• To window coordinates


The OpenGL Vertex Pipeline


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

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

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

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

Vertex assembly (in our case)
glColor3f(0, 0.5, 0); Application
glVertex2i(11, 31);
glVertex2i(37, 71); Vertex assembly
glColor3f(0.5, 0, 0); // no effect
Vertex operations

Primitive assembly

struct { Primitive operations
float x,y,z,w; // 11, 31, 0, 1
float r,g,b,a; // 0, 0.5, 0, 1 Rasterization
} vertex;
Fragment operations
struct {
float x,y,z,w; // 37, 71, 0, 1
Framebuffer
float r,g,b,a; // 0, 0.5, 0, 1
} vertex;
Display

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

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;
} triangle;
or
Rasterization
struct {
vertex v0,v1; Fragment operations
} line;
or Framebuffer
struct {
vertex v0; Display
} point; Centre for Computational Technologies

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);
glEnd(); 2 Display
0 Centre for Computational Technologies

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
– Nothing happens
Rasterization

Fragment operations

Framebuffer

Display

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
} triangle;
struct { Rasterization
short int x,y;
float depth; Fragment operations
float r,g,b,a;
} fragment; Framebuffer

Display

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:

Rasterization

Fragment operations

Framebuffer

Display

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

OpenGL Library Organization
• GLU (OpenGL Utility Library), modeling
• GLUT (GL Utility Toolkit), window system interface


Graphics Functions
• Primitive functions
• Attribute functions
• Transformation functions
• Viewing functions
• Input functions
• Control functions


Primitives
• Specified via vertices
• General schema
glBegin(type);
glVertex*(...);
...
glVertex*(...);
glEnd();

• type determines interpretation of vertices


Example: Square Outline
• Type GL_LINE_LOOP
glBegin(GL_LINE_LOOP);
glVertex2f(0.0, 0.0);
glEnd();
• z coordinate defaults to 0
• Calls to other functions are allowed between
glBegin(type) and glEnd();


Points and Line Segments

• Make sense in three dimensions


Polygons

• Polygons enclose an area

• Rendering of area (fill) depends on attributes
• All vertices must be in one plane


Polygon Restrictions
• OpenGL Polygons must be simple
• OpenGL Polygons must be convex

(a) simple, but not convex

convex

(b) non-simple


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


Polygon Strips
• Efficiency in space and time
• Reduces visual artefacts

• Polygons have a front and a back, possibly with
different attributes!


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


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


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


GLUT Callbacks
• Window system independent interaction

• glutDisplayFunc(display);
• glutReshapeFunc(reshape);
• glutKeyboardFunc (keyboard);

• glutMainLoop processes events


Initializing Attributes
• Separate in “init” function
void init(void)
{
glClearColor (0.0, 0.0, 0.0, 0.0);
/* glShadeModel (GL_FLAT); */
glShadeModel (GL_SMOOTH);
}


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 */
}


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


The Image
• Color of last vertex with flat shading

glShadeModel(GL_FLAT) glShadeModel(GL_SMOOTH)


Smooth Shading
• Approximating a sphere
Flat Shading Smooth Shading


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


Viewport
• Determines clipping in window coordinates
• glViewPort(x, y, w, h)


Orthographic Projection
• 2D and 3D versions
• glOrtho2D(left, right, bottom, top)
• In world coordinates!


Reminder
• Programming Assignment 1 out today
• Due in two weeks
• Compilation instructions on course page together with
assignment


Questions?


OpenGL Basics

More Related Content

What's hot

Viewers also liked

Similar to OpenGL Basics

Recently uploaded

OpenGL Basics