Exploratory Data Analysis

Data Visualization
Lecture –5

Change of Orthonormal Basis

Dr Pavan Chakraborty
IIIT-Allahabad

Indian Institute of Information Technology - Allahabad

OUTLINE

• Intro to Transformations

• Classes of Transformations

• Representing Transformations

• Combining Transformations

• Change of Orthonormal Basis

Indian Institute of Information Technology - Allahabad

Indian Institute of Information Technology - Allahabad
Indian Institute of Information Technology - Allahabad
Indian Institute of Information Technology - Allahabad
Indian Institute of Information Technology - Allahabad
Indian Institute of Information Technology - Allahabad
Indian Institute of Information Technology - Allahabad
Indian Institute of Information Technology - Allahabad
Indian Institute of Information Technology - Allahabad
Exploratory Data Analysis

Data Visualization

Lecture –6

Projection Transformations
(Orthonormal and Perspective)

Dr Pavan Chakraborty
IIIT-Allahabad
Dr. Pavan Chakraborty, Indian Institute of Information Technology - Allahabad
Taxonomy of Projections

Dr. Pavan Chakraborty, Indian Institute of Information Technology - Allahabad

 Parallel Projection
• Center of projection is at infinity
– Direction of projection (DOP) same for all points

View
Plane

DOP

Dr. Pavan Chakraborty, Indian Institute of Information Technology - Allahabad

Orthographic Projections
• DOP perpendicular to view plane

Front

Top Side

Dr. Pavan Chakraborty, Indian Institute of Information Technology - Allahabad

 Oblique Projections
• DOP not perpendicular to view plane

Cavalier Cabinet
o o
(DOP φ = 45 ) (DOP φ = 63.4 )
tan(φ) = 1 tan(φ) = 2
Dr. Pavan Chakraborty, Indian Institute of Information Technology - Allahabad
 Orthographic Projection

• Simple Orthographic
Transformation

• Original world units are preserved

– Pixel units are preferred

Dr. Pavan Chakraborty, Indian Institute of Information Technology - Allahabad

Orthographic: Screen Space
Transformation
left =10 m right = 20 m

top=20 m

(max pixx, max pixy)

(height in pixels)

(0, 0)
bottom=10 m
(width in pixels)

Dr. Pavan Chakraborty, Indian Institute of Information Technology - Allahabad

 Orthographic: Screen Space
Transformation (Normalization)

• left, right, top, bottom refer to the viewing

frustum in modeling coordinates
• width and height are in pixel units
• This matrix scales and translates to accomplish
the transition in units

Dr. Pavan Chakraborty, Indian Institute of Information Technology - Allahabad

Dr. Pavan Chakraborty, Indian Institute of Information Technology - Allahabad
Dr. Pavan Chakraborty, Indian Institute of Information Technology - Allahabad
Dr. Pavan Chakraborty, Indian Institute of Information Technology - Allahabad
Dr. Pavan Chakraborty, Indian Institute of Information Technology - Allahabad
Dr. Pavan Chakraborty, Indian Institute of Information Technology - Allahabad
 Indian InstituteIndian
Dr. Pavan Chakraborty, of Information Technology
Institute of - Allahabad
Information Technology - Allahabad
Dr. Pavan Chakraborty, Indian Institute of Information Technology - Allahabad
Dr. Pavan Chakraborty, Indian Institute of Information Technology - Allahabad
Dr. Pavan Chakraborty, Indian Institute of Information Technology - Allahabad
Dr. Pavan Chakraborty, Indian Institute of Information Technology - Allahabad
Dr. Pavan Chakraborty, Indian Institute of Information Technology - Allahabad
Dr. Pavan Chakraborty, Indian Institute of Information Technology - Allahabad
Dr. Pavan Chakraborty, Indian Institute of Information Technology - Allahabad
Dr. Pavan Chakraborty, Indian Institute of Information Technology - Allahabad
Dr. Pavan Chakraborty, Indian Institute of Information Technology - Allahabad
Dr. Pavan Chakraborty, Indian Institute of Information Technology - Allahabad
Dr. Pavan Chakraborty, Indian Institute of Information Technology - Allahabad
Dr. Pavan Chakraborty, Indian Institute of Information Technology - Allahabad
Dr. Pavan Chakraborty, Indian Institute of Information Technology - Allahabad
Dr. Pavan Chakraborty, Indian Institute of Information Technology - Allahabad
Dr. Pavan Chakraborty, Indian Institute of Information Technology - Allahabad
Dr. Pavan Chakraborty, Indian Institute of Information Technology - Allahabad
Dr. Pavan Chakraborty, Indian Institute of Information Technology - Allahabad
Perspective Transformation
• First discovered by Donatello, Brunelleschi,
and DaVinci during Renaissance
• Objects closer to viewer look larger
• Parallel lines appear to converge to single point

Dr. Pavan Chakraborty, Indian Institute of Information Technology - Allahabad

 Perspective Projection
• How many vanishing points?

1-Point
Perspective
Dr. Pavan Chakraborty, Indian Institute of Information Technology - Allahabad
 Perspective Projection

• How many vanishing points?

2-Point 1-Point
Perspective Perspective

Dr. Pavan Chakraborty, Indian Institute of Information Technology - Allahabad

 Perspective Projection
• How many vanishing points?

3-Point
Perspective

Dr. Pavan Chakraborty, Indian Institute of Information Technology - Allahabad

 Perspective Projection

• How many vanishing points?

3-Point 2-Point 1-Point

Perspective Perspective Perspective

Dr. Pavan Chakraborty, Indian Institute of Information Technology - Allahabad

 Perspective Projection
• In the real world, objects exhibit perspective
foreshortening: distant objects appear
smaller
• The basic situation:
f
z

f
Dr. Pavan Chakraborty, Indian Institute of Information Technology - Allahabad
 Perspective Projection
• When we do 3-D graphics, we think of the
screen as a 2-D window onto the 3-D world:
P (x, y, z)

P’ (x’, y’, z’=f )

How tall should
this bunny be?

f
z
Dr. Pavan Chakraborty, Indian Institute of Information Technology - Allahabad
 Perspective Projection
′ ′
From simple relations of right angle triangles: = =

P (x, y, z)
′= . . ′= .
.
P’ (x’, y’, z’=f )

′= . =

f
z
𝒛
𝒛
𝒛
𝒛
𝒙
𝒚
𝒙

𝒇
𝒚

𝒇
𝒛

𝒇
𝒇
Dr. Pavan Chakraborty, Indian Institute of Information Technology - Allahabad
𝒇
𝒙

𝒚

𝒙
𝒚
𝒛
 Perspective Projection
′ ′
= = ′= . . ′= . .
′= . = What could a matrix look like to do
this?

1 0 0 0
0 1 0 0
=
𝑓
0 0 1 0
1
0 0 0
𝑝
𝑒
𝑟
𝑠
𝑝
𝑒
𝑐
𝑡
𝑖
𝑣
𝑒
𝑀
𝑧
𝑧
𝑥
𝑧
𝑦
𝑧
𝑧

𝑓
𝑓
𝑥

𝑓
𝑦

𝑓
Dr. Pavan Chakraborty, Indian Institute of Information Technology - Allahabad
𝑓
𝑥

𝑦

𝑧
𝑥
𝑦
 Perspective Projection
′ ′
= = ′= . . ′= . .
′= . = What could a matrix look like to do
this?

1 0 0 0
0 1 0 0
=
𝑓
0 0 1 0
1
0 0 0
𝑝
𝑒
𝑟
𝑠
𝑝
𝑒
𝑐
𝑡
𝑖
𝑣
𝑒
𝑀
𝑧
𝑧
𝑥
𝑧
𝑦
𝑧
𝑧

𝑓
𝑓
𝑥

𝑓
𝑦

𝑓
Dr. Pavan Chakraborty, Indian Institute of Information Technology - Allahabad
𝑓
𝑥

𝑦

𝑧
𝑥
𝑦
 A Perspective Projection Matrix
• Example:
′ 1 0 0 0
′ 0 1 0 0
= = 1 0
′ 0 0
1
′ 0 0 0 1

• For homogenous 3-D coordinates: ′ = 1:

𝑓
𝜔

𝑓
[ ] [ ]
𝑧
𝑧

, , = , ,
𝑧
𝑧
/ / /
𝑦

𝑦
𝑦
𝑧
𝑧
𝑥
𝑧
𝑓
𝑧
𝑓
𝑧
𝑓
𝑥

𝑥
𝑓
𝑓
𝑓
Dr. Pavan Chakraborty, Indian Institute of Information Technology - Allahabad
𝜔

𝑥
𝑥
𝑧
𝑦
𝑦
 Projection Matrices
• Now that we can express perspective
foreshortening as a matrix, we can
compose it onto our other matrices with the
usual matrix multiplication
• End result: a single matrix encapsulating
modeling, viewing, and projection
transforms

Dr. Pavan Chakraborty, Indian Institute of Information Technology - Allahabad

 Perspective vs. Parallel
• Perspective projection
+ Size varies inversely with distance - looks realistic
– Distance and angles are not (in general) preserved
– Parallel lines do not (in general) remain parallel

• Parallel projection
+ Good for exact measurements
+ Parallel lines remain parallel
– Angles are not (in general) preserved
– Less realistic looking

Dr. Pavan Chakraborty, Indian Institute of Information Technology - Allahabad

Perspective vs. Parallel

Dr. Pavan Chakraborty, Indian Institute of Information Technology - Allahabad

Classical Projections

Dr. Pavan Chakraborty, Indian Institute of Information Technology - Allahabad

Data Visualization
Lecture –7

Viewing Transformations

Dr Pavan Chakraborty
IIIT-Allahabad

Dr. Pavan Chakraborty, Indian Institute of Information Technology - Allahabad

 A 3D Scene
• Notice the presence of
the camera, the
projection plane, and
the world
coordinate axes

• Viewing transformations define how to acquire

the image on the projection plane

Dr. Pavan Chakraborty, Indian Institute of Information Technology - Allahabad

Viewing Transformations
• Create a camera-centered view

• Camera is at origin
• Camera is looking along negative z-axis
• Camera’s ‘up’ is aligned with y-axis

Dr. Pavan Chakraborty, Indian Institute of Information Technology - Allahabad

 2 Basic Steps
• Align the two coordinate frames by rotation

Dr. Pavan Chakraborty, Indian Institute of Information Technology - Allahabad

 2 Basic Steps
• Translate to align origins

Dr. Pavan Chakraborty, Indian Institute of Information Technology - Allahabad

Creating Camera Coordinate Space

• Specify a point where the camera is located in world

space, the eye point
• Specify a point in world space that we wish to become
the center of view, the look at point
• Specify a vector in world
space that we wish to
point up in camera
image, the up vector
• Intuitive camera
movement

Dr. Pavan Chakraborty, Indian Institute of Information Technology - Allahabad

 Eye Point /
Camera Point

→
=
→
=
→
−
Look At Point

World
Coordinate
𝒛
𝒛
𝒛
𝑬
𝑬
𝑼
𝒚
𝒑
𝒚
𝒆
𝒆
𝒕
𝒛
𝒛
𝑳
𝒐
𝒐
𝒌
𝑳
𝑨
𝒐
𝒕
𝒐
𝒌
𝑨
𝒕
𝒚
𝒚
𝒚
𝒚
𝒚
𝑬
𝑼
𝑬
𝒑
𝒚
𝒚
𝒆
𝒆
𝒍
𝑳
𝒐
𝒐
𝒌
𝑳
𝑨
𝒐
𝒕
𝒐
𝒌
𝑨
𝒕
Dr. Pavan Chakraborty, Indian Institute of Information Technology - Allahabad
𝒙
𝒙
𝒙
𝑬
𝑼
𝒑
𝒚
𝒆
𝒙
𝒙
𝑳
𝒐
𝒐
𝒌
𝑳
𝑨
𝒐
𝒕
𝒐
𝒌
𝑨
𝒕
𝑬
𝑼
𝑬
𝒑
𝒚
𝒚
𝒆
𝒆
 Constructing Viewing
Transformation
• Create a vector from eye-point to look at-point

• Normalize the vector

• Desired rotation matrix should map this

vector to [0, 0, -1]T Why?

^ =− ^
𝑒
𝑦
𝑒
𝑧
𝑙
Dr. Pavan Chakraborty, Indian Institute of Information Technology - Allahabad
 Constructing Viewing
Transformation,
• Construct another important vector from the
cross product of the lookat-vector and the
vup-vector

• This vector, when normalized, should align

with [1, 0, 0]T

^ = ^
𝑒
𝑦
𝑒
𝑥
𝑟
Dr. Pavan Chakraborty, Indian Institute of Information Technology - Allahabad
 Constructing Viewing
Transformation

• One more vector to define…

• This vector, when normalized, should align with

[0, 1, 0]T

• Now let’s compose the results ^ = ^

𝑒
𝑦
𝑒
𝑦
𝑢
Dr. Pavan Chakraborty, Indian Institute of Information Technology - Allahabad
 World to Camera Coordinate
Transformation
• We know the three world axis vectors (x, y, z)
{Orthonormal Coordinates}
• We know the three camera axis vectors (r, u, l)
• {Orthonormal Coordinates}
• Viewing transformation, V, must convert from world
to camera coordinate systems

Dr. Pavan Chakraborty, Indian Institute of Information Technology - Allahabad

 Compositing Vectors to Form V
• Translation component too

• Multiply it through

Dr. Pavan Chakraborty, Indian Institute of Information Technology - Allahabad

 Final Viewing
Transformation
^
+ . ^ ^ ^ ^ ^ ^
+ . + . − . →
^
+ . ^ ^ ^ ^ ^ ^
+ . + . − . →
− =
^
− . ^ ^ ^ ^ ^ ^
− . − . + . →
1 1
0 0 0 1

Eye

= −
𝑒
𝑦
𝑒
𝑤
𝑜
𝑟
𝑙
𝑑
𝑒
𝑦
𝑒
𝑒
𝑦
𝑒
𝑙
𝑥
𝑙
𝑦
𝑙
𝑧
𝑙
𝑒
𝑦
𝑒
1
𝑙
𝑧
𝑒
𝑦
𝑒
World
𝑧
1
𝑙
𝑢
𝑧
𝑢
𝑒
𝑦
𝑒
𝑢
𝑥
𝑢
𝑦
𝑦
𝑢
𝑒
𝑦
𝑒
𝑢
𝑦
𝑥
𝑟
Dr. Pavan Chakraborty, Indian Institute of Information Technology - Allahabad
𝑟
𝑥
𝑟
𝑦
𝑟
𝑧
𝑟
𝑒
𝑦
𝑒
𝑟
𝑒
𝑦
𝑒
𝑥
Dr. Pavan Chakraborty, Indian Institute of Information Technology - Allahabad
 CAMERA

A
Pivot

Pendulum

Dr. Pavan Chakraborty, Indian Institute of Information Technology - Allahabad

 Eye Point /
Camera Point

→
=
→
=
→
−
Look At Point

World
Coordinate
𝒛
𝒛
𝒛
𝑬
𝑬
𝑼
𝒚
𝒑
𝒚
𝒆
𝒆
𝒕
𝒛
𝒛
𝑳
𝒐
𝒐
𝒌
𝑳
𝑨
𝒐
𝒕
𝒐
𝒌
𝑨
𝒕
𝒚
𝒚
𝒚
𝒚
𝒚
𝑬
𝑼
𝑬
𝒑
𝒚
𝒚
𝒆
𝒆
𝒍
𝑳
𝒐
𝒐
𝒌
𝑳
𝑨
𝒐
𝒕
𝒐
𝒌
𝑨
𝒕
Dr. Pavan Chakraborty, Indian Institute of Information Technology - Allahabad
𝒙
𝒙
𝒙
𝑬
𝑼
𝒑
𝒚
𝒆
𝒙
𝒙
𝑳
𝒐
𝒐
𝒌
𝑳
𝑨
𝒐
𝒕
𝒐
𝒌
𝑨
𝒕
𝑬
𝑼
𝑬
𝒑
𝒚
𝒚
𝒆
𝒆
 ^ =−^
^ = ^ ^ = ^
Eye Point /
Camera Point

: →
=
→ :
→ =
: − Look At Point
:

→
:

= . ^
→
n-D

= . ^
Coordinates
𝒏
𝒏
𝒏
𝑬
𝑬
𝑼
𝒑
𝒚
𝒚
𝒆
𝒆
𝒏
𝒏
𝑳
𝒐
𝒐
𝒌
𝑳
𝑨
𝒐
𝒕
𝒐
𝒌
𝑨
𝒕
𝑒
𝑦
𝑒
𝑥
𝑦
𝑒
𝑒
𝑒
𝑦
𝑦
𝑦
𝑒
𝑒
𝑒
𝑒
𝑦
𝑒
𝑧
𝑙
𝟐
𝟐
𝟐
𝑣
𝑣
𝑣
𝑣
𝒍
𝑥
𝑦
𝑥
𝑢
𝑟
𝑦
𝟐
𝟐
𝑬
𝑬
𝑼
𝒑
𝒚
𝒚
𝒆
𝒆
𝑳
𝒐
𝒐
𝒌
𝑳
𝑨
𝒐
𝒕
𝒐
𝒌
𝑨
𝒕
Dr. Pavan Chakraborty, Indian Institute of Information Technology - Allahabad
𝟏
𝟏
𝟏
𝑬
𝑼
𝒑
𝒚
𝒆
𝟏
𝟏
𝑳
𝒐
𝒐
𝒌
𝑳
𝑨
𝒐
𝒕
𝒐
𝒌
𝑨
𝒕
𝑬
𝑬
𝑼
𝒑
𝒚
𝒚
𝒆
𝒆
Dr. Pavan Chakraborty, Indian Institute of Information Technology - Allahabad
Indian Institute of Information Technology - Allahabad
Indian Institute of Information Technology - Allahabad