The Graphics Pipeline and OpenGL I:

Transformations!

Gordon Wetzstein!
Stanford University!
!

EE 267 Virtual Reality!

Lecture 2!
stanford.edu/class/ee267/!
!
Albrecht Dürer, “Underweysung der Messung mit dem Zirckel und Richtscheyt”, 1525!
 Lecture Overview!
•  what is computer graphics?!
•  the graphics pipeline!
•  primitives: vertices, edges, triangles!!
•  model transforms: translations, rotations, scaling!
•  view transform !
•  perspective transform!
•  window transform!
blender.org!
Modeling 3D Geometry!

Courtesy of H.G. Animations!

https://www.youtube.com/watch?v=fewbFvA5oGk!
blender.org!
 What is Computer Graphics?!
•  at the most basic level: conversion from 3D scene description to 2D image!

•  what do you need to describe a static scene?!

•  3D geometry and transformations!
•  lights!
•  material properties!

•  most common geometry primitives in graphics:!

•  vertices (3D points) and normals (unit-length vector associated with vertex)!
•  triangles (set of 3 vertices, high-resolution 3D models have M or B of triangles)!
 The Graphics Pipeline! blender.org!

•  geometry + transformations!
•  cameras and viewing!
•  lighting and shading!
•  rasterization!
•  texturing!
!
 Some History!

•  Stanford startup in 1981!

•  computer graphics goes hardware!
•  based on Jim Clark’s geometry engine!
Some History!
 The Graphics Pipeline!
•  monolithic graphics workstations of the 80s have been replaced by modular
GPUs (graphics processing units); major companies: NVIDIA, AMD, Intel!

•  early versions of these GPUs implemented fixed-function rendering pipeline in

hardware !

•  GPUs have become programmable starting in the late 90s !

•  e.g. in 2001 Nvidia GeForce 3 = first programmable shaders!

•  now: GPUs = programmable (e.g. OpenGL, CUDA, OpenCL) processors !

 The Graphics Pipeline!

GPU = massively!
parallel processor!
•  OpenGL is our The Graphics Pipeline!
interface to the
GPU!!

•  right: “old-school”
OpenGL state
machine!

•  today’s lecture:
vertex transforms!

I had this poster hanging on my dorm wall during undergrad!

 WebGL!
•  JavaScript application programmer interface (API) for 2D and 3D graphics!

•  OpenGL ES 2.0 running in the browser, implemented by all modern browsers!

•  overview, tutorials, documentation: see lab 1!

!
 three.js!
•  cross-browser JavaScript library/API !

•  higher-level library that provides a lot of useful helper functions, tools, and
abstractions around WebGL – easy and convenient to use!

•  https://threejs.org/!
•  simple examples: https://threejs.org/examples/!

•  great introduction (in WebGL):!

http://davidscottlyons.com/threejs/presentations/frontporch14/!
 The Graphics Pipeline!

https://www.ntu.edu.sg/home/ehchua/programming/opengl/CG_BasicsTheory.html!
 The Graphics Pipeline!

1.  Vertex Processing: Process and transform individual vertices & normals.!
2.  Rasterization: Convert each primitive (connected vertices) into a set of fragments. A fragment can
be interpreted as a pixel with attributes such as position, color, normal and texture.!
3.  Fragment Processing: Process individual fragments.!
4.  Output Merging: Combine the fragments of all primitives (in 3D space) into 2D color-pixel for the
display.!

https://www.ntu.edu.sg/home/ehchua/programming/opengl/CG_BasicsTheory.html!
 The Graphics Pipeline!

1.  Vertex Processing: Process and transform individual vertices & normals.!
2.  Rasterization: Convert each primitive (connected vertices) into a set of fragments. A fragment can
be interpreted as a pixel with attributes such as position, color, normal and texture.!
3.  Fragment Processing: Process individual fragments.!
4.  Output Merging: Combine the fragments of all primitives (in 3D space) into 2D color-pixel for the
display.!

https://www.ntu.edu.sg/home/ehchua/programming/opengl/CG_BasicsTheory.html!
 The Graphics Pipeline!

vertex shader! fragment shader!

•  transforms & (per- •  texturing !

vertex) lighting! •  (per-fragment) lighting!

https://www.ntu.edu.sg/home/ehchua/programming/opengl/CG_BasicsTheory.html!
 Coordinate Systems!
•  right hand coordinate system!

•  a few different coordinate systems:!

•  object coordinates!
•  world coordinates!
•  viewing coordinates!
•  also clip, normalized device, and
window coordinates!

wikipedia!
 Primitives!
•  vertex = 3D point v(x,y,z)!

•  triangle = 3 vertices!

n3
•  normal = 3D vector per vertex describing
n2
surface orientation n=(nx,ny,nz)! v3
v2

n1

v1
 Pixels v Fragments!
•  fragments have rasterized 2D coordinates on screen but a lot of other attributes
too (texture coordinates, depth value, alpha value, …)!
•  pixels appear on screen!
•  won’t discuss in more detail today!

https://www.ntu.edu.sg/home/ehchua/programming/opengl/CG_BasicsTheory.html!
 Vertex Transforms!

https://www.ntu.edu.sg/home/ehchua/programming/opengl/CG_BasicsTheory.html!
 Vertex Transforms!

vertex/normal!
transforms!

https://www.ntu.edu.sg/home/ehchua/programming/opengl/CG_BasicsTheory.html!
 Vertex Transforms!
1.  Arrange the objects (or models, or avatar) in
the world (Model Transform).!

https://www.ntu.edu.sg/home/ehchua/programming/opengl/CG_BasicsTheory.html!
 Vertex Transforms!
1.  Arrange the objects (or models, or avatar) in
the world (Model Transform).!

https://www.ntu.edu.sg/home/ehchua/programming/opengl/CG_BasicsTheory.html!
 Vertex Transforms!
1.  Arrange the objects (or models, or avatar) in
the world (Model Transform).!

https://www.ntu.edu.sg/home/ehchua/programming/opengl/CG_BasicsTheory.html!
 Vertex Transforms!
1.  Arrange the objects (or models, or avatar) in
the world (Model Transform).!

https://www.ntu.edu.sg/home/ehchua/programming/opengl/CG_BasicsTheory.html!
 Vertex Transforms!
1.  Arrange the objects (or models, or avatar) in
the world (Model Transform).!

https://www.ntu.edu.sg/home/ehchua/programming/opengl/CG_BasicsTheory.html!
 Vertex Transforms!
1.  Arrange the objects (or models, or avatar) in
the world (Model Transform).!
2.  Position and orientation the camera (View
transform).!

https://www.ntu.edu.sg/home/ehchua/programming/opengl/CG_BasicsTheory.html!
 Vertex Transforms!
1.  Arrange the objects (or models, or avatar) in
the world (Model Transform).!
2.  Position and orientation the camera (View
transform).!

https://www.ntu.edu.sg/home/ehchua/programming/opengl/CG_BasicsTheory.html!
 Vertex Transforms!
1.  Arrange the objects (or models, or avatar) in
the world (Model Transform).!
2.  Position and orientation the camera (View
transform).!

https://www.ntu.edu.sg/home/ehchua/programming/opengl/CG_BasicsTheory.html!
 Vertex Transforms!
1.  Arrange the objects (or models, or avatar) in
the world (Model Transform).!
2.  Position and orientation the camera (View
transform).!
3.  Select a camera lens (wide angle, normal or
telescopic), adjust the focus length and zoom
factor to set the camera's field of view
(Projection transform).!

https://www.ntu.edu.sg/home/ehchua/programming/opengl/CG_BasicsTheory.html!
 Vertex Transforms!
1.  Arrange the objects (or models, or avatar) in
the world (Model Transform).!
2.  Position and orientation the camera (View
transform).!
3.  Select a camera lens (wide angle, normal or
telescopic), adjust the focus length and zoom
factor to set the camera's field of view
(Projection transform).!

https://www.ntu.edu.sg/home/ehchua/programming/opengl/CG_BasicsTheory.html!
 Vertex Transforms!
1.  Arrange the objects (or models, or avatar) in
the world (Model Transform).!
2.  Position and orientation the camera (View
transform).!
3.  Select a camera lens (wide angle, normal or
telescopic), adjust the focus length and zoom
factor to set the camera's field of view
(Projection transform).!

https://www.ntu.edu.sg/home/ehchua/programming/opengl/CG_BasicsTheory.html!
 Vertex Transforms!
1.  Arrange the objects (or models, or avatar) in
the world (Model Transform).!
2.  Position and orientation the camera (View
transform).!
3.  Select a camera lens (wide angle, normal or
telescopic), adjust the focus length and zoom
factor to set the camera's field of view
(Projection transform).!

https://www.ntu.edu.sg/home/ehchua/programming/opengl/CG_BasicsTheory.html!
 Model Transform!
⎛ x ⎞
•  transform each vertex v = ⎜ y ⎟ from object coordinates to world coordinates!
⎜ ⎟
⎜⎝ z ⎟⎠

https://www.ntu.edu.sg/home/ehchua/programming/opengl/CG_BasicsTheory.html!
 Model Transform - Scaling!
⎛ x ⎞
•  transform each vertex v = ⎜ y ⎟ from object coordinates to world coordinates!
⎜ ⎟
⎜⎝ z ⎟⎠

1.  scaling as 3x3 matrix! ⎛ sx 0 0 ⎞

⎜ ⎟
S(sx , sy , sz ) = ⎜ 0 sy 0 ⎟
⎜ 0 0 sz ⎟⎠
⎝

⎛ sx 0 0 ⎞⎛ x ⎞ ⎛ sx x ⎞
⎜ ⎟ ⎟ =⎜ s y ⎟
scaled vertex = matrix-vector product:! Sv = ⎜ 0 sy 0 ⎟⎜ y
⎜ ⎟ ⎜ y ⎟
⎜ 0
⎝ 0 sz ⎠ ⎜⎝ z
⎟ ⎟⎠ ⎜ s z
⎝ z
⎟
⎠
 Model Transform - Rotation!
⎛ x ⎞
•  transform each vertex v = ⎜ y ⎟ from object coordinates to world coordinates!
⎜ ⎟
⎜⎝ z ⎟⎠

2.  rotation as 3x3 matrix!

⎛ cosθ − sin θ 0 ⎞ ⎛ 1 0 0 ⎞ ⎛ cosθ 0 sin θ ⎞

Rz (θ ) = ⎜ sin θ cosθ 0 ⎟ Rx (θ ) = ⎜ 0 cosθ − sin θ ⎟ Ry (θ ) = ⎜ 0 1 0 ⎟
⎜ ⎟ ⎜ ⎟ ⎜ ⎟
⎝ 0 0 1 ⎠ ⎝ 0 sin θ cosθ ⎠ ⎝ − sin θ 0 cosθ ⎠

rotated vertex = matrix-vector product, e.g. !

⎛ cosθ − sin θ 0 ⎞ ⎛ x ⎞ ⎛ x cosθ − ysin θ ⎞
Rz v = ⎜ sin θ cosθ 0 ⎟ ⎜ y ⎟ = ⎜ x sin θ + y cosθ ⎟
⎜ ⎟ ⎜⎜ ⎟ ⎜ ⎟
⎝ 0 0 1 ⎠ ⎝ z ⎟⎠ ⎜⎝ z ⎟⎠
 Model Transform - Translation!
⎛ x ⎞
•  transform each vertex v = ⎜ y ⎟ from object coordinates to world coordinates!
⎜ ⎟
⎜⎝ z ⎟⎠

3.  translation cannot be represented as 3x3 matrix!!

⎛ x ⎞ ⎛ dx ⎞ ⎛ x + dx ⎞
⎜ y ⎟ + ⎜ dy ⎟ = ⎜ y + dy ⎟
⎜ ⎟ ⎜ ⎟ ⎜ ⎟
⎜⎝ z ⎟⎠ ⎜ d ⎟ ⎜ z + d ⎟
⎝ z ⎠ ⎝ z ⎠
that’s unfortunate L!
 Model Transform - Translation!
⎛ x ⎞
⎜ y ⎟
•  solution: use homogeneous coordinates, vertex is! v=⎜ ⎟
⎜ z ⎟
⎜⎝ 1 ⎟⎠
3.  translation is 4x4 matrix!

⎛ 1 0 0 dx ⎞ ⎛ 1 0 0 dx ⎞ ⎛ x ⎞ ⎛ x + dx ⎞
⎜ ⎟ ⎜ ⎟ ⎟ ⎜ y+d ⎟
0 1 0 dy ⎟ 0 1 0 dy ⎟ ⎜ y
T (d) = ⎜ Tv = ⎜ ⎜ ⎟ =⎜ y ⎟
⎜ 0 0 1 dz ⎟ ⎜ 0 0 1 dz ⎟ ⎜ z ⎟ ⎜ z + dz ⎟
⎜ ⎟ ⎜ ⎟⎜ ⎟⎠ ⎜⎜ ⎟
⎜⎝ 0 0 0 1 ⎟⎠ ⎜⎝ 0 0 0 1 ⎟⎠ ⎝ 1 ⎝ 1 ⎟⎠

better J!
Summary of Homogeneous Matrix Transforms!
⎛ 1 0 0 dx ⎞
⎜ ⎟
0 1 0 dy ⎟
•  translation! T (d) = ⎜
⎜ 0 0 1 dz ⎟
⎜ ⎟
⎜⎝ 0 0 0 1 ⎟⎠

! ⎛ sx 0 0 0 ⎞
⎜ ⎟
0 sy 0 0 ⎟
•  scale! S(s) = ⎜
⎜ 0 0 sz 0 ⎟
⎜ ⎟
! ⎜⎝ 0 0 0 1 ⎟⎠

⎛ cosθ − sin θ 0 0 ⎞ ⎛ 1 0 0 0 ⎞ ⎛ cosθ 0 sin θ 0 ⎞

⎜ sin θ cosθ 0 0 ⎟ ⎜ 0 cosθ − sin θ 0 ⎟ ⎜ 0 1 0 0 ⎟
•  rotation! Rz (θ ) = ⎜ ⎟ Rx = ⎜ ⎟ Ry = ⎜ ⎟
⎜ 0 0 1 0 ⎟ ⎜ 0 sin θ cosθ 0 ⎟ ⎜ − sin θ 0 cosθ 0 ⎟
⎜⎝ 0 0 0 1 ⎟⎠ ⎜⎝ 0 0 0 1 ⎟⎠ ⎜⎝ 0 0 0 1 ⎟⎠

! Read more: https://www.ntu.edu.sg/home/ehchua/programming/opengl/CG_BasicsTheory.html!

Summary of Homogeneous Matrix Transforms!
⎛ 1 0 0 dx ⎞ ⎛ 1 0 0 −d x ⎞
⎜ ⎟ ⎜ ⎟
0 1 0 dy ⎟ 0 1 0 −d y ⎟
•  translation T (d) = ⎜ inverse translation! T −1 (d) = T (−d) = ⎜
⎜ 0 0 1 dz ⎟ ⎜ 0 0 1 −dz ⎟
⎜ ⎟ ⎜ ⎟
⎜⎝ 0 0 0 1 ⎟⎠ ⎜⎝ 0 0 0 1 ⎟⎠

! ⎛ sx 0 0 0 ⎞ ⎛ 1 / sx 0 0 0 ⎞
⎜ ⎟ ⎜ ⎟
0 sy 0 0 ⎟ ⎛ 1⎞ 0 1 / sy 0 0 ⎟
•  scale S(s) = ⎜ inverse scale! S −1 (s) = S ⎜ ⎟ =⎜
⎜ 0 0 sz 0 ⎟ ⎝ s⎠ ⎜ 0 0 1 / sz 0 ⎟
⎜ ⎟ ⎜ ⎟
! ⎜⎝ 0 0 0 1 ⎟⎠ ⎜⎝ 0 0 0 1 ⎟⎠

⎛ cosθ − sin θ 0 0 ⎞ ⎛ cos− θ − sin− θ 0 0 ⎞

⎜ sin θ cosθ ⎟ ⎜ sin− θ cos− θ 0 0 ⎟
•  rotation Rz (θ ) = ⎜
0 0
⎟ inverse rotation! Rz−1 (θ ) = Rz ( −θ ) = ⎜ ⎟
⎜ 0 0 1 0 ⎟ ⎜ 0 0 1 0 ⎟
⎜⎝ 0 0 0 1 ⎟⎠ ⎜⎝ 0 0 0 1 ⎟⎠

! Read more: https://www.ntu.edu.sg/home/ehchua/programming/opengl/CG_BasicsTheory.html!

Summary of Homogeneous Matrix Transforms!

•  successive transforms:! v' = T ⋅ S ⋅ Rz ⋅ Rx ⋅T ⋅ v

!
(T ⋅ S ⋅ R ⋅ R ⋅T ) ⋅ v'
−1
•  inverse successive transforms:! v = z x

= T −1 ⋅ Rx−1 ⋅ Rz−1 ⋅ S −1 ⋅T −1 ⋅ v'

!

Read more: https://www.ntu.edu.sg/home/ehchua/programming/opengl/CG_BasicsTheory.html!

 Vector and Normal Transforms!
⎛ (v2 − v1 )x ⎞⎛ tx ⎞
⎜ ⎟⎜ ⎟
(v2 − v1 )y ty ⎟
•  homogeneous representation of a vector t, i.e. t=⎜ ⎟⎜
⎜ (v − v ) ⎟⎜ tz ⎟
pointing from v1 to v2 : ! ⎜ 2 1 z ⎟⎜ ⎟
⎜⎝ (1− 1) ⎟⎠ ⎜⎝ 0 ⎟⎠

•  successive transforms:! t ' = M ⋅t = M ⋅ ( v2 − v1 ) = M ⋅ v2 − M ⋅ v1

! v'2
•  this works!!

v2
M
t t'
v1 v'1
 Vector and Normal Transforms!
⎛ nx ⎞
⎜ ⎟
ny ⎟
•  homogeneous representation of a normal n=⎜
⎜ nz ⎟
(unit length, perpendicular to surface)! ⎜ ⎟
⎜⎝ 0 ⎟⎠

•  successive transforms ???! n' = M ⋅ n

! v'2
•  this does NOT work! (non-uniform scaling n'
is a problem)! v2
n
M
t t'
v1 v'1
 Vector and Normal Transforms!
⎛ nx ⎞
⎜ ⎟
ny ⎟
•  homogeneous representation of a normal n=⎜
⎜ nz ⎟
(unit length, perpendicular to surface)! ⎜ ⎟
⎜⎝ 0 ⎟⎠

n' = ( M −1 ) ⋅ n
T
•  need to use normal matrix = transpose of
inverse for transformation! ! v'2
!
n'
v2
n
M
t t'
v1 v'1
 Vector and Normal Transforms!
⎛ nx ⎞
⎜ ⎟
ny ⎟
•  homogeneous representation of a normal n=⎜
⎜ nz ⎟
(unit length, perpendicular to surface)! ⎜ ⎟
⎜⎝ 0 ⎟⎠

n' = ( M −1 ) ⋅ n
T
•  need to use normal matrix = transpose of
inverse for transformation!!

•  fine print: only use upper left 3x3 part of modelview matrix for inverse transpose
(no homogeneous normal representation) OR drop w component from n’ after
multiplying 4x4 inverse transpose (i.e. don’t use w for normalization of n’!)!
 Attention!!

•  rotations and translations (or transforms in general) are not commutative!!

•  make sure you get the correct order!!
!
 View Transform!
•  so far we discussed model transforms, e.g. going from object or model space to
world space !

https://www.ntu.edu.sg/home/ehchua/programming/opengl/CG_BasicsTheory.html!
 View Transform!
•  so far we discussed model transforms, e.g. going from object or model space to
world space !
•  one simple 4x4 transform matrix is sufficient to go from world space to camera
or view space!!

https://www.ntu.edu.sg/home/ehchua/programming/opengl/CG_BasicsTheory.html!
 View Transform!
specify camera by!
! ⎛ eyex ⎞
⎜ ⎟
•  eye position! eye = ⎜ eyey ⎟
! ⎜ eye ⎟
⎝ z ⎠
⎛ centerx ⎞
⎜ ⎟
•  reference position! center = ⎜ centery ⎟
⎜ center ⎟
! ⎝ z ⎠

! ⎛ upx ⎞
⎜ ⎟
•  up vector! up = ⎜ upy ⎟
⎜ upz ⎟⎠
⎝
 View Transform!
specify camera by! compute 3 vectors:!
! ⎛ eyex ⎞
⎜ ⎟ eye − center
•  eye position! eye = ⎜ eyey ⎟ zc =
eye − center
! ⎜ eye ⎟
⎝ z ⎠
up × z c
⎛ centerx ⎞ x =
c

⎜ ⎟ up × z c
•  reference position! center = ⎜ centery ⎟
⎜ center ⎟ yc = z c × x c
! ⎝ z ⎠

! ⎛ upx ⎞
⎜ ⎟
•  up vector! up = ⎜ upy ⎟
⎜ upz ⎟⎠
⎝
 View Transform!
view transform M is translation into eye position, ! compute 3 vectors:!
followed by rotation!
eye − center
! zc =
eye − center
!
up × z c
x =
c

up × z c

yc = z c × x c
 View Transform!
view transform M is translation into eye position, ! compute 3 vectors:!
followed by rotation!
eye − center
! zc =
eye − center
!
up × z c
x =
c

up × z c
⎛ x xc x yc xzc 0 ⎞⎛ 1 0 0 −eyex ⎞
⎜ ⎟⎜ yc = z c × x c
⎟
⎜ yxc yyc yzc 0 ⎟⎜ 0 1 0 −eyey ⎟
M = R ⋅T (−e) = ⎜ ⎟⎜
⎜ zxc zyc zzc 0 ⎟⎜ 0 0 1 −eyez ⎟
⎟
⎜ ⎟⎜ 1 ⎟⎠
⎝ 0 0 0 1 ⎠⎝ 0 0 0
 View Transform!
view transform M is translation into eye position, !
followed by rotation!
!
!

⎛
⎜
x xc x yc xzc ( )
− x xc eyex + x yc eyey + xzc eyez ⎞
⎟
⎜ yxc yyc yzc − ( y eye + y eye + y eye )
c c c ⎟
M = R ⋅T (−e) = ⎜ x x y y z z
⎟
⎜ zxc zyc zzc − ( z eye + z eye + z eye )
c c c ⎟
⎜ x x y y z z
⎟
⎜⎝ 0 0 0 1 ⎟⎠
 View Transform – Attention!!

•  many graphics APIs have a function called lookat that automatically computes
the view matrix for you!

•  Three.js also has such a function, but that only computes the rotation, not the
translation, of the view matrix. So best implement the view matrix yourself!!
!
!
 View Transform!
•  in camera/view space, the camera is at the origin, looking into negative z!
•  modelview matrix is combined model (rotations, translations, scaling) and view
matrix!!

https://www.ntu.edu.sg/home/ehchua/programming/opengl/CG_BasicsTheory.html!
 View Transform!
•  in camera/view space, the camera is at the origin, looking into negative z!

up

x
z

x
z
vodacek.zvb.cz!
 Projection Transform!
•  similar to choosing lens and sensor of camera – specify field of view and aspect!

https://www.ntu.edu.sg/home/ehchua/programming/opengl/CG_BasicsTheory.html!
 Projection Transform - Perspective Projection!
•  have symmetric view frustum!
•  fovy: vertical angle in degrees!
•  aspect: ratio of width/height!
•  zNear: near clipping plane (relative from cam)!
•  zFar: far clipping plane (relative from cam)!
f = cot( fovy / 2)

⎛ f ⎞
⎜ aspect 0 0 0 ⎟
⎜ ⎟
⎜ 0 f 0 0 ⎟
M proj =⎜ ⎟ projection matrix!
⎜ zFar + zNear 2 ⋅ zFar ⋅ zNear ⎟
0 0 − −
⎜ zFar − zNear zFar − zNear ⎟ (symmetric frustum)!
⎜⎝ 0 0 −1 0 ⎟⎠
 Projection Transform - Perspective Projection!
more general: a perspective “frustum” (truncated, possibly
sheared pyramid)!
•  left (l), right (r), bottom (b), top (t): corner coordinates
on near clipping plane (at zNear)!
perspective frustum!

⎛ 2 ⋅ zNear r+l ⎞
⎜ 0 0 ⎟
r−l r−l
⎜ ⎟
⎜ 2 ⋅ zNear t +b ⎟
0 0
M proj =⎜ t −b t −b ⎟ projection matrix!
⎜ ⎟
⎜ zFar + zNear 2 ⋅ zFar ⋅ zNear ⎟
0 0 − − (asymmetric frustum)!
⎜ zFar − zNear zFar − zNear ⎟
⎜⎝ 0 0 −1 0 ⎟⎠
 Projection Transform - Orthographic Projection!
more general: a “box frustum” (no perspective, objects
don’t get smaller when farther away)!
•  left (l), right (r), bottom (b), top (t): corner coordinates
on near clipping plane!

⎛ 2 r+l ⎞
⎜ r−l 0 0 − ⎟
r−l
⎜ ⎟
⎜ 0 2 t +b ⎟
0 −
M proj =⎜ t −b t −b ⎟ projection matrix!
⎜ ⎟
⎜ 0 −2 f +n ⎟
0 − (orthographic)!
⎜ f −n f −n ⎟
⎜ 0 ⎟
⎝ 0 0 1 ⎠
 Perspective! Orthographic!

[Song Ho Ahn]!
 Projection Transform!
•  possible source of confusion for zNear and zFar:!
!
•  Marschner & Shirley define it as absolute z coordinates, thus zNear>zFar and
both values are always negative !

•  OpenGL and we define it as positive values, i.e. the distances of the near and
far clipping plane from the camera (zFar > zNear)!
 Modelview Projection Matrix!
•  put it all together with 4x4 matrix multiplications!!

vclip = M proj ⋅ M view ⋅ M model ⋅ v = M proj ⋅ M mv ⋅ v

vertex in clip space! projection matrix! modelview matrix!

 Clip Space!

https://www.ntu.edu.sg/home/ehchua/programming/opengl/CG_BasicsTheory.html!
 Normalized Device Coordinates (NDC)!
from: OpenGL Programming Guide!

•  not shown in previous illustration!

•  get to NDC by perspective division!

⎛ xclip ⎞ ⎛ xclip / wclip ⎞ ∈( −1,1)

⎜ ⎟ ⎜ ⎟
vclip
⎜
=⎜
yclip ⎟
vNDC
y /w
= ⎜ clip clip ⎟ ∈( −1,1)
zclip ⎟ ⎜ z /w ⎟
⎜ ⎟ ⎜ clip clip ⎟ ∈( −1,1)
⎜ wclip ⎟⎠ ⎜⎝ ⎟⎠
⎝ 1

vertex in clip space! vertex in NDC!

 Viewport Transform!
from: OpenGL Programming Guide!
define (sub)window as viewport(x,y,width,height),!
!

•  x,y lower left corner of viewport rectangle

(default is (0,0))!
•  width, height size of viewport rectangle in
pixels !

width
xwindow =
2
( xNDC + 1) + x
⎞ ∈( 0, width )
height
ywindow =
2
( yNDC + 1) + y ⎛ xclip / wclip ⎞ ⎛ x
window
⎜ ⎟ ⎜ ⎟
1 1 y /w ⎜ y ⎟ ∈( 0,height )
zwindow = zNDC +
vNDC = ⎜ clip clip ⎟ vwindow = ⎜ window ⎟
2 2 ⎜ z /w ⎟
⎜ clip clip ⎟ ⎜ z window ⎟ ∈( 0,1)
⎜⎝ 1 ⎟⎠ ⎜⎝ 1 ⎟⎠

vertex in NDC! vertex in window coords!

The Graphics Pipeline – Another Illustration!
 The Graphics Pipeline!

all vertex
transforms
from today!!

https://www.ntu.edu.sg/home/ehchua/programming/opengl/CG_BasicsTheory.html!
 The Graphics Pipeline!

•  assign fixed color (e.g. red) to each vertex in window coordinates (fragment)!
•  interpolate (i.e. rasterize) lines between vertices (as defined by user)!

https://www.ntu.edu.sg/home/ehchua/programming/opengl/CG_BasicsTheory.html!
… and we can almost do this …!

Nintendo Virtual Boy Game “Red Alarm”!

 Summary!
•  graphics pipeline is a series of operations that takes 3D vertices/normals/
triangles as input and generates fragments and pixels !

•  today, we only discussed a part of it: vertex and normal transforms!

•  transforms include: rotation, scale, translation, perspective projection,

perspective division, and viewport transform!

•  most transforms are represented as 4x4 matrices in homogeneous coordinates

à know your matrices & be able to create, manipulate, invert them!!
Next Lecture: Lighting and Shading, Fragment Processing!

vertex shader! fragment shader!

•  transforms & (per- •  texturing !

vertex) lighting! •  (per-fragment) lighting!

https://www.ntu.edu.sg/home/ehchua/programming/opengl/CG_BasicsTheory.html!
 Further Reading!
•  course notes on transforms (see course website)!

•  good overview of OpenGL (deprecated version) and graphics pipeline (missing

a few things) :!
https://www.ntu.edu.sg/home/ehchua/programming/opengl/CG_BasicsTheory.html!
!

•  textbook: Shirley and Marschner “Fundamentals of Computer Graphics”, AK

Peters, 2009!

•  definite reference: “OpenGL Programming Guide” aka “OpenGL Red Book”!

!
•  WebGL / three.js tutorials: https://threejs.org/!