This document discusses the computer graphics pipeline. It describes the key stages of the pipeline including modeling, transforms, lighting calculations, viewing transforms, clipping, projection transforms, and rasterization. It also provides details on OpenGL and how it implements aspects of the graphics pipeline such as specifying the camera viewpoint using functions like gluLookAt. Finally, it gives an example of how to implement camera rotation in an OpenGL application to view a 3D scene from different angles.

1. 3/4/2019
1
SBE 306: Computer Graphics
Pipeline
Dr. Ayman Eldeib
Systems & Biomedical
Engineering Department
Spring 2019
Computer Graphics Pipeline
Graphical Information Flow
Transform
Illuminate
Transform
Clip
Project
Rasterize
Model & Camera
Parameters
Rendering Pipeline Framebuffer Display
A memory
array in which
the computer
stores an
image

2. 3/4/2019
2
Computer Graphics Pipeline
 There are two pipelines:
 The upper pipeline – Geometric Primitives
o Vertex-based primitives – points, lines and polygons
 The lower pipeline – Image Primitives
o Pixel-based primitives – image and bitmaps
 These two separate pipelines are linked through texture
mapping
Cont.
Graphical Information Flow
Computer Graphics Pipeline
Rendering Pipeline
Spring 2011
Modeling
Transforms
3D geometry
Primitives
Lighting
Calculations
Viewing
Transform
Clipping
Projection
Transform
Scan
Conversion
Image
Transform into 3D world coordinate system
Transform into 3D camera coordinate system
Draw pixels (includes texturing, hidden surface, ...)
Clip primitives outside camera’s view
Transform into 2D screen coordinate system
Illuminate according to lighting and reflectance

3. 3/4/2019
3
Computer Graphics Pipeline
Spring 2011
Modeling
Transforms
3D geometry
Primitives
Lighting
Calculations
Viewing
Transform
Clipping
Projection
Transform
Scan
Conversion
Image
 Model/view transforms combined
 Really “vertices” not “primitives”
Making this the vertex pipeline
 There’s a lot going on in the “scan conversion”
stage! [pixel or fragment pipeline]
Primitive assembly
Rasterization
Texture mapping
Per-pixel lighting
Visibility (Z-buffer)
For an OpenGL system
Cont.
Rendering Pipeline
Computer Graphics Pipeline
Graphical Information Flow
GPUCPU
Application
Vertex
Processor & Rasterization
Assembly
& Rasterization
Pixel
Processor
Vertices
(3D)
Vertices
(2D)
Fragments
(pre-pixels)
Final pixels
(Color, Depth)
Graphics State
Render-to-texture
Application Geometry
“vertex pipeline”
Rasterization
“pixel/fragment pipeline”
Handle input,
Simulation & AI, etc.
Transform, Lighting, Calculate
texture coords, etc.
fill pixels, Interpolate vertex
parameters, Look up/filter
textures, etc.
Video
Memory
(Textures)

4. 3/4/2019
4
Computer Graphics Pipeline
OpenGL and Related APIs

Computer Graphics Pipeline
OpenGL: Application Structure Basics
 Configure and open window
 Initialize OpenGL state
 Register input callback functions
 Render
 Resize
 Input: keyboard, mouse, etc
 Enter event processing loop

5. 3/4/2019
5
Computer Graphics Pipeline
Modeling: The Basics
 Common interactive 3-D primitives: points,
lines, polygons (i.e., triangles)
 Organized into objects
 Collection of primitives, other objects
 Associated matrix for transformations
 Instancing: using same geometry for multiple
objects
 4 wheels on a car, 2 arms on a robot
Computer Graphics Pipeline
Modeling: The Scene Graph
 The scene graph captures transformations and object-
object relationships
 Maintain a matrix stack of transformations
 Nodes are objects;
 Arrows indicate instancing
Each has a matrix Robot
BodyHead
ArmTrunkLegEyeMouth

6. 3/4/2019
6
Computer Graphics Pipeline
Rendering: Transformation
 There are three set of transformation:
Modeling transforms
o Size, place, scale, and rotate objects parts
o Object coordinates  world coordinates
Viewing transforms
o Rotate & translate the world to lie directly in front of the camera
Typically place camera at origin
Typically looking down -Z axis
oWorld coordinates  view coordinates
Projection transforms
o Apply perspective foreshortening
o View coordinates  screen coordinates
Computer Graphics Pipeline
OpenGL: 3D Coordinate System
Left handed Right handed
OpenGL uses a right handed coordinate system

7. 3/4/2019
7
Computer Graphics Pipeline
 OpenGL has a model view matrix that is applied
to each point (vertex)
 You can alter the current model view matrix by
calling a transformation function
 This applies the transformation to all points
drawn after the transformation call
OpenGL: Modeling
Computer Graphics Pipeline
Viewing: Camera Movement

8. 3/4/2019
8
Computer Graphics Pipeline
OpenGL: Camera Movement
 In OpenGL the last transformation defined is the
first one applied
 To move the camera a transformation must be
applied to all scene points
 Thus a transformation that moves the camera
should be the first transformation applied
Cont.
Computer Graphics Pipeline
OpenGL: Camera Frame
• gluLookAt(eyex, eyey, eyez, centerx, centery, centerz, upx, upy, upz)
• Camera is at eye, looking at center, with the up direction being up
Eye
Up vector (u)
Center
-Z
YX
V vector (v)

9. 3/4/2019
9
Computer Graphics Pipeline
OpenGL: Specifying Viewpoint
 glMatrixMode(GL_MODELVIEW);
 glLoadIdentity();
 gluLookAt(eyeX, eyeY, eyeZ,
lookX, lookY, lookZ,
upX, upY, upZ);
 eye[XYZ]: camera position in world coordinates
 look[XYZ]: a point centered in camera’s view
 up[XYZ]: a vector defining the camera’s vertical
 Creates a matrix that transforms points in world coordinates to camera
coordinates
 Camera at origin
 Looking down -Z axis
 Up vector aligned with Y axis (actually Y-Z plane)
Computer Graphics Pipeline
OpenGL: Camera Movement
gluLookAt(eyex, eyey, eyez, centerx, centery, centerz, upx, upy, upz)
Camera is at eye, looking at center, with the up direction being up
 First, create a coordinate frame for the camera
The look vector is center minus eye
Then use cross product with up vector
 Define a rotation matrix
 Apply appropriate translation for camera (eye)
location

10. 3/4/2019
10
Computer Graphics Pipeline
OpenGL: Camera Example
Crystal Ball Interface
 Allow the user two options perhaps using the
left-right and up-down arrow keys
1. Rotate about the vertical direction in the
window
2. Rotate about the horizontal direction in
the window
Computer Graphics Pipeline
 Eye position – location of camera center
(ex,ey,ez)
 Look vector – direction camera is looking
w vector
 Up vector – the vertical direction for the camera
u vector
 V is horizontal direction for the camera
Cont.
OpenGL: Camera Example
Crystal Ball Interface

11. 3/4/2019
11
Computer Graphics Pipeline
 Rotate about the vertical direction in the window
Rotate the eye position about the up vector
The up vector and the center point remain fixed
 Rotate about the horizontal direction in the window
Compute the current horizontal direction from
the up vector and the look vector
Rotate the eye about the horizontal direction
Rotate the up vector about the horizontal
direction
OpenGL: Camera Example
Crystal Ball Interface
Cont.
g{tÇ~ lÉâg{tÇ~ lÉâg{tÇ~ lÉâg{tÇ~ lÉâ