COMP 371
Computer Graphics
Session 2
Introduction to Computer Graphics
Lecture Overview
OpenGL API
Graphics pipeline
Primitives: lines, polygons
Attributes: color
Example
02
OpenGL
What is OpenGL
Low-level graphics library (API) for 2D/3D interactive
graphics
Originated from SGI’s GL in 1992
Version Used for this course – 3.1 or above
New version 5.0 or Vulkan?
Managed by Khronos Group (non-profit consortium)
API is governed by Architecture Review Board (part of
Khronos)
Used in broadcasting, CAD/CAM/CAE, entertainment,
medical imaging, and virtual reality to produce and
display incredibly compelling 2D & 3D graphics
03 ©Computer Graphics Instructors
OpenGL
OpenGL API
Programmer manages the graphics system functionality
through the Application Programmer Interface (API)
API: functions that specify what we need to form an image
object(s), viewer, light source(s), materials
Provides access to other information
input from devices such as mouse and keyboard
04 ©Computer Graphics Instructors
OpenGL
OpenGL is Cross-Platform
Available for Windows, Linux, Mac
A freeware OpenGL implementation is also
available on Linux called Mesa
Same code will work on different OSes
most of the time with no modifications!
05 ©Computer Graphics Instructors
OpenGL
What an OpenGL program does?
From the programmer’s point of view:
Specifies the geometric object(s) in the scene
Describes the properties of the object(s)
Color, material properties i.e. how object reflects light
Defines how object(s) are viewed
Camera positioning, type
Specifies light source(s)
Light positioning, type
Creates animations
move object(s), camera, light(s), etc
Specifies rendering properties
antialiasing, etc.
06 ©Computer Graphics Instructors
OpenGL
How OpenGL works?
OpenGL is a state machine
You give it orders to set the current state of any
one of its internal variables, or to query for its
current status
State variables: color, camera position, light position,
material properties, etc
The current state persists until set to new values
by the program
Example: once we set a color, that color remains the
current color until it is changed through a color-altering
function
07 ©Computer Graphics Instructors
OpenGL
Library Organization
OpenGL (GL) - core graphics
function names begin with letters gl
OpenGL Framework Library (GLFW) - provides
programmers with the ability to create and manage
windows and OpenGL contexts, as well as handling of
input devices and events.
function names begin with letters glfw
OpenGL Extension Wrangler Library (GLEW) -
provides efficient run-time mechanisms for
determining which OpenGL extensions are supported
on the target platform.
function names begin with letters glew
08 ©Computer Graphics Instructors
OpenGL
Other libraries (some examples)
GLM – OpenGL Mathematics
C++ math library based on the OpenGL Shading
Language (GLSL) Specifications
OGRE – Object-Oriented Graphics Rendering Engine
scene-oriented, real-time, 3D rendering engine. It
is written in C++ and is designed to make it easier
to write programs that use hardware-accelerated
3D graphics.
09 ©Computer Graphics Instructors
OpenGL
Immediate-mode Graphics [up to v3.1]
Primitives are not stored in the system but rather
passed through the system for possible rendering
as soon as they become available
Each time a vertex is specified in application, it is
sent to the GPU
Creates data transfer bottleneck between CPU and GPU
Removed since OpenGL 3.1
The scene is re-drawn for each frame
10 ©Computer Graphics Instructors
OpenGL
Retained mode Graphics [v3.1 onwards]
We want to minimize the data transfers from CPU
to GPU
Solution:
Put all vertex and attribute data in array
Send array to GPU to be rendered immediately
This is almost OK but problem is we would have to send array over
each time we need another render of it
Revised solution:
Put all vertex and attribute data in array
Send array over and store on GPU for multiple renderings
11 ©Computer Graphics Instructors
OpenGL
Graphics Pipeline [simplified]
A scene contains a set of objects
Each object comprises a set of geometric primitives
Each primitive comprises a set of vertices
A complex scene can have millions of vertices that define
the objects
All vertices must be processed efficiently in a similar
manner to form an image in the framebuffer
Pipeline consists of four major steps in the imaging process
Clipper and
Vertex Fragment
Vertices primitive Rasterizer Pixels
Processor Processor
assembler
12 ©Computer Graphics Instructors
OpenGL
Graphics Pipeline [simplified]
Implemented by OpenGL, graphics drivers and the
graphics hardware
programmer does not have to implement the pipeline
pipeline is configurable using special programs called
“shaders”
Clipper and
Vertex Fragment
Vertices primitive Rasterizer Pixels
Processor Processor
assembler
13 ©Computer Graphics Instructors
OpenGL
Vertex
The GPU is optimized to render triangles through the
Graphics Pipeline
Virtual Worlds can be Modeled using thousands of
triangles. Curved surfaces can be approximated using
triangles.
Each triangle is composed of 3 vertices : position and
other attributes (color, normal, material parameters,
etc)
Clipper and
Vertex Fragment
Vertices primitive Rasterizer Pixels
Processor Processor
assembler
14 ©Computer Graphics Instructors
OpenGL
Vertices
Vertices are defined in world coordinates
In OpenGL [immediate mode, deprecated]:
void glVertex{234}{sfid}[v](TYPE coords,...)
2,3,4: the vertex dimensions
sfid: short, float, int, double
TYPE: short, float, int, double - for portability use GLtype
E.g: GLfloat x,y,z;
glVertex3f(x,y,z); →sends vertex (x,y,z) down the pipeline
Clipper and
Vertex Fragment
Vertices primitive Rasterizer Pixels
Processor Processor
assembler
15 ©Computer Graphics Instructors
OpenGL
Vertex Processing
Two major functions:
carry out coordinate transformations
compute a color for each vertex
Clipper and
Vertex Fragment
Vertices primitive Rasterizer Pixels
Processor Processor
assembler
16 ©Computer Graphics Instructors
OpenGL
Vertex Processing → Coordinate Transform
Transformations are functions that map points
from one place to another
Transformations in world
coordinates
Deprecated
void glRotate{f,d}(GLtype angle, GLtype x, GLtype y, GLtype z)
void glScale{f,d}(GLtype sx, GLtype sy, GLtype sz)
void glTranslate{f,d}(GLtype tx, GLtype ty, GLtype tz)
Clipper and
Vertex Fragment
Vertices primitive Rasterizer Pixels
Processor Processor
assembler
17 ©Computer Graphics Instructors
OpenGL
Vertex Processing → Coordinate Transform
Almost every step in the rendering pipeline
involves a change of coordinate systems.
Transformations are central to understanding 3D
computer graphics.
The best way to implement transformations is with
matrix operations
In 3D, transformation matrices are 4x4 matrices.
Clipper and
Vertex Fragment
Vertices primitive Rasterizer Pixels
Processor Processor
assembler
18 ©Computer Graphics Instructors
OpenGL
Vertex Processing → Coordinate Transform
The position of each vertex will go through a sequence
of transformations from the Model Coordinate System,
to the Screen Coordinate System
Every vertex on a Model is transformed using a
transformation matrix taking into account the position
of the model in the world, the camera position and
projection parameters
This Matrix is called the Model-View-Projection Matrix
Clipper and
Vertex Fragment
Vertices primitive Rasterizer Pixels
Processor Processor
assembler
19 ©Computer Graphics Instructors
OpenGL
Vertex Processing → Coordinate Transform
20 ©Computer Graphics Instructors
OpenGL
Vertex Processing → Vertex color
Assignment of vertex colors
Simple
explicitly define color for each vertex [immediate mode]
void glColor{3,4}{b,s,i,f,d,ub,us,ui}(GLtype red, GLtype green,
Deprecated
GLtype blue, [GLtype alpha])
Complex
compute the color from a physically realistic lighting model
which takes into account the surface properties of the object
and the characteristic light sources in the scenes
Clipper and
Vertex Fragment
Vertices primitive Rasterizer Pixels
Processor Processor
assembler
21 ©Computer Graphics Instructors
OpenGL
Clipping and Primitive assembling
No imaging system can see the whole world at once → Use a
clipping volume to define visible area
Clipping is done mostly automatically by defining the viewport
Clipping is performed on primitives
Primitive assembly must be done before
i.e. assemble sets of vertices into primitives
Clipper and
Vertex Fragment
Vertices primitive Rasterizer Pixels
Processor Processor
assembler
22 ©Computer Graphics Instructors
OpenGL
Clipping and Primitive assembling
Possible cases:
visible → continue processing
non-visible → stop processing
partially visible → continue with visible part
The projections of objects in the clipping
volume appear in the final image
Projections are again represented as
transformations
Orthographic vs Perspective
Clipper and
Vertex Fragment
Vertices primitive Rasterizer Pixels
Processor Processor
assembler
23 ©Computer Graphics Instructors
OpenGL
Rasterization
The primitives that emerge from the clipper are still
represented in terms of their vertices and must be further
processed to generate pixels in the frame buffer
Example: three vertices defining a triangle filled with a solid color → the
rasterizer determines which pixels in the frame buffer are inside the
polygon
Transforms vertices to window coordinates
The output is a set of fragments for each primitive
A fragment is a potential pixel which carries information e.g. color,
position, depth
Clipper and
Vertex Fragment
Vertices primitive Rasterizer Pixels
Processor Processor
assembler
24 ©Computer Graphics Instructors
OpenGL
Rasterization
Transform vertices to window
coordinates?
Vertex values are interpolated inside
the triangle
Antialiasing
Clipper and
Vertex Fragment
Vertices primitive Rasterizer Pixels
Processor Processor
assembler
25 ©Computer Graphics Instructors
OpenGL
Fragment Processing
The fragment processor takes in the fragments
generated by the rasterizer and updates the pixels in
the frame buffer
Processing examples:
some fragments may not be visible
color may be altered because of texture or bump mapping
create translucent effects by combining the fragment’s color with
the color of the pixel
Clipper and
Vertex Fragment
Vertices primitive Rasterizer Pixels
Processor Processor
assembler
26 ©Computer Graphics Instructors
OpenGL
Example
Clipper and
Vertex Fragment
Vertices primitive Rasterizer Pixels
Processor Processor
assembler
27 ©Computer Graphics Instructors
OpenGL
Graphics Pipeline [detailed]
Implemented by OpenGL, graphics drivers and
the graphics hardware
programmer does not have to implement the
pipeline
unless extra control is required → pipeline is
reconfigurable using special programs
called “shaders” → vertex, tessellator, geometry
and fragment
Clipper and
Vertex Fragment
Vertices primitive Rasterizer Pixels
Processor Processor
assembler
28 ©Computer Graphics Instructors
OpenGL
Primitives & Attributes
In addition to the functions a graphics API needs to
provide a way to represent objects in terms of
geometry and appearance
Geometry → Primitives
Appearance → Attributes
29 ©Computer Graphics Instructors
OpenGL
Primitives
Most APIs support a limited set of primitives
including
Points (1D object)
Line segments (2D objects)
Polygons (3D objects)
Some curves and surfaces
Quadrics
Parametric polynomial
Primitives are specified via vertices
30 ©Computer Graphics Instructors
OpenGL
Polygon Representation
There are different types of Primitives supported by
the Graphics Hardware
Choosing the right primitive type is important to
ensure your geometry renders correctly and
efficiently
31 ©Computer Graphics Instructors
OpenGL
OpenGL Primitive Types
Polygons (GL_POLYGON) successive vertices define line segments, last vertex
connects to first
Triangles and Quadrilaterals (GL_TRIANGLES, GL_QUADS) successive groups
of 3 or 4 interpreted as triangles or quads
Strips and Fans (GL_TRIANGLE_STRIP, GL_QUAD_STRIP, GL_TRIANGLE_FAN)
joined triangles or quads that share vertices
32 ©Computer Graphics Instructors
OpenGL
OpenGL Primitive Types
33 ©Computer Graphics Instructors
OpenGL
Winding Order
Polygons in OpenGL are usually viewed from one-side,
meaning they can only be viewed from their “front” side
In order to draw the “front” side of a polygon, the vertices
must be specified in counter-clockwise order from the
perspective of the camera
To get this behavior Backface Culling
must be enabled
glCullFace(GL_BACK);
34 ©Computer Graphics Instructors
OpenGL
Polygon Issues
OpenGL (driver) will convert quads and polygons into
triangles and only display triangles
Simple: edges cannot cross
Convex: All points on line segment between two points in a polygon are
also in the polygon
Flat: all vertices are in the same plane
Non-Simple Polygon Non-Convex Polygon
Application program must tessellate a concave polygon into
triangles (triangulation)
OpenGL 4.1 contains a tessellator
35 ©Computer Graphics Instructors
OpenGL
Examples
Simple Non-Convex Polygon Complex Polygon Simple and Convex Polygon
36 ©Computer Graphics Instructors
OpenGL
Polygon Issues
Why only simple and convex?
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 available in GLU (an older GL Utility
functions library) for decomposing complex polygons
(tessellation)
Triangles are most efficient → use triangles in
assignments
37 ©Computer Graphics Instructors
OpenGL
Attributes
Attributes determine the appearance of objects
Color (points, lines, polygons)
Size and width (points, lines)
Stipple pattern (lines, polygons)
Polygon mode
Display as filled: solid color or stipple pattern
Display edges
Display vertices
38 ©Computer Graphics Instructors
OpenGL
Color
Electromagnetic radiation
Humans can see only part of the spectrum
Image Courtesy: Socratic.org
39 ©Computer Graphics Instructors
OpenGL
Color
The human eye has three types of cones which
respond to particular wavelengths
The wavelengths correspond to colors R, G, B
Source: Vos & Walraven
Wavelength (nanometers)
40 ©Computer Graphics Instructors
OpenGL
Color Models
RGB (Red, Green, Blue)
Each color component is stored
separately in the frame buffer
Usually 8 bits per component in buffer
Color values can range from 0.0 (none) to
1.0 (all) using floats or over the range
from 0 to 255 using unsigned bytes
Convenient for display
Can be unintuitive (3 floats in OpenGL)
41 ©Computer Graphics Instructors
OpenGL
Color Models
HSV (Hue, Saturation, Value)
Hue: what color
Saturation: how far away from gray
Value: how bright
Other color models used for printing [CMYK],
movies, etc
42 ©Computer Graphics Instructors
OpenGL
Example
Minimal example of using OpenGL
v4.5 [retained mode] for drawing
a triangle
Example output:
Renderer: NVIDIA GeForce GTX ...
OpenGL version supported: 4.5.0
43 ©Computer Graphics Instructors
OpenGL
Example – Draw Triangle
Draw a triangle → define 3 points
for now we ignore transformations and projections
create an array with a total of 9 numbers
corresponding to 3 points x 3 dimensions each x, y ,z
float points[ ] = {
0.0f, 0.5f, 0.0f,
0.5f, -0.5f, 0.0f,
-0.5f, -0.5f, 0.0f
}
44 ©Computer Graphics Instructors
OpenGL
Example – Draw Triangle
Draw a triangle → define 3 points float points[ ] = {
for now we ignore transformations and projections 0.0f, 0.5f, 0.0f,
create an array with a total of 9 numbers corresponding 0.5f, -0.5f, 0.0f,
to 3 points x 3 dimensions each x, y ,z -0.5f, -0.5f, 0.0f
}
Next step is to copy this part of memory
onto the graphics card in a unit called Vertex GLuint vao = 0;
Buffer Object (VBO) glGenVertexArrays(1, &vao);
glBindVertexArray(vao);
generate an empty buffer
set it as the current buffer i.e. bind
glEnableVertexAttribArray(0);
copy the points Gluint vbo = 0;
glGenBuffers(1, &vbo);
Next step is to setup the Vertex Array Object
glBindBuffer(GL_ARRAY_BUFFER, vbo);
(VAO)
glBufferData(GL_ARRAY_BUFFER, 9 * sizeof(float), points,
collection of VBOs to hold vertex points, GL_STATIC_DRAW);
texture cooordinates, colors, etc. glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 0, NULL);
setup one per mesh → when we want to draw,
we bind the VAO and draw
glVertexAttribPointer defines the layout for
attribute e.g. 0
45 ©Computer Graphics Instructors
OpenGL
Example – Shaders
Need to define how to draw the VAO → Programmable Shaders
Looks a lot like programming in C
You can load the shaders from a file or write them in-line
Note that the attribute pointer matches the input variables in the shader
Vertex Shader
describes where the 3D points will end up on
the display, runs once per vertex
1 input variable → vec3 (matches the VBO attr. pointer)
gl_Position is a reserved name → vec4
Fragment Shader
describes the colours of fragments, runs once per fragment
1 output variable → vec4 (red, green, blue, alpha)
values range from 0-1
46 ©Computer Graphics Instructors
OpenGL
Example – Using Shaders
In order to use the shaders
Load the strings into a GL shader
Compile
The compiled shaders must be combined into a single executable
GPU shader program
create an empty program
attach the shaders
link them together
47 ©Computer Graphics Instructors
OpenGL
Example – Drawing
To draw our VAO
Clear the drawing surface
Specify which GPU shader program to use
Set the VAO as the input variables for further drawing
Draw
Triangles Result
Starting from point 0
3 points at a time
Display Loop
48 ©Computer Graphics Instructors
OpenGL
Review
OpenGL API
Graphics Pipeline
Primitives: vertices, lines, polygons
Attributes: color
Example
49 ©Computer Graphics Instructors
OpenGL
Next Lecture
Input and Interaction
Client/Server Model
Callbacks
Double Buffering
Hidden Surface Removal
Simple Transformations
50
50 ©Computer Graphics Instructors
