CS 455 Computer Graphics

Window to Viewport Transformations

Compositing Transformations
Does order matter?
Case 1: translate by (2, 0), scale by (2, 2)
Case 2: scale by (2, 2), translate by (-2, 0)
Begin: red, 1st transform: purple, 2nd: green

(
(
(

=
1 0 0
0 1 0
2 0 1
T
(
(
(

=
1 0 0
0 2 0
0 0 2
S
Y
X
1,1
3,1
2,3
Y
X
1,1
3,1
2,3
Case 1(translate then scale)
Case 2 (scale then translate)
Compositing Transformations
Does order matter?
Case 1: translate by (2, 0), scale by (2, 2)
Case 2: scale by (2, 2), translate by (-2, 0)
Begin: red, 1st transform: purple, 2nd: green

(
(
(

=
1 0 0
0 1 0
2 0 1
T
(
(
(

=
1 0 0
0 2 0
0 0 2
S
Y
X
1,1
3,1
2,3
Y
X
1,1
3,1
2,3
Case 1(translate then scale)
Case 2 (scale then translate)
-1,1
0,3
-1,1
0,6
-2,2
2,2
2,2
6,2
4,6
0,2
4,2
2,6
Composition Example

STP P =
'
TSP P =
'
(
(
(

1 0 0
0 2 0
0 0 2
(
(
(

=
(
(
(

1 0 0
0 2 0
4 0 2
1 0 0
0 1 0
2 0 1
(
(
(

1 0 0
0 1 0
2 0 1
(
(
(

=
(
(
(

1 0 0
0 2 0
2 0 2
1 0 0
0 2 0
0 0 2
Scale(2.0,2.0);
Translate(-2.0,0.0);
drawTriangle();
Translate(-2.0, 0.0);
Scale(2.0,2.0);
drawTriangle();
In general, transformations are not commutative
Need to transform points from world view (window) to
the screen view (viewport)
Maintain relative placement of points (usually)
Can be done with a translate-scale-translate sequence
Window-to-Viewport Transform
x
y
-3
-2
-1
0
1
2
3
-4 -3 -2 -1 1 2 3 4
u
v
0 10 20 30 40 50 60 70 80
10
20
30
40
50
60
0
Window (world) Viewport (screen)
Window refers to the area in world space or world
coordinates that you wish to project onto the screen
Location, units, size, etc. are all determined by the application,
and are convenient for that application
Units could be inches, feet, meters, kilometers, light years, etc.
The window is often centered around the origin, but need not be
Specified as (x,y) coordinates
Window
x
y
-3
-2
-1
0
1
2
3
-4 -3 -2 -1 1 2 3 4
Window (world)
(x
min
, y
min
)
(x
max
, y
max
)
The area on the screen that you will map the window to
Specified in screen coordinates - (u,v) coordinates
The viewport can take up the entire screen, or just a
portion of it
Viewport
u
v
0 10 20 30 40 50 60 70 80
10
20
30
40
50
60
0
Viewport (screen)
(u
min
, v
min
)
(u
max
, v
max
)
You can have multiple viewports
They can contain the same view of a window, different views of the same
window, or different views of different windows
Viewport (cont)
u
v
0 10 20 30 40 50 60 70 80
10
20
30
40
50
60
0
Viewport (screen)
The window-to-viewport transform is:
1. Translate lower-left corner of
window to origin
2. Scale width and height of
window to match viewports
3. Translate corner at origin to
lower-left corner in viewport
Window-to-Viewport Transform (cont.)
x
y
-3
-2
-1
0
1
2
3
-4 -3 -2 -1 1 2 3 4
v
u
0 10 20 30 40 50 60 70 80
0
10
20
30
40
50
60
Window (world) Viewport (screen)
(

min
min

y
x
(

min
min

v
u
(

max
max

v
u
(

max
max

y
x
min min
and y t x t
y x
= =
min max
min max
min max
min max
and
y y
v v
s
x x
u u
s
y x

=
min min
and v t u t
y x
= =
Window-to-Viewport Transform (cont.)
The final window-to-viewport transform is:
( ) ( )
(
(
(
(
(
(
(

=
(
(
(

(
(
(
(
(
(
(

(
(
(

=
-
|
|
.
|

\
|

- =
1 0 0
0
0
1 0 0
1 0
0 1
1 0 0
0 0
0 0
1 0 0
1 0
0 1
min
min max
min max
min
min max
min max
min
min max
min max
min
min max
min max
min
min
min max
min max
min max
min max
min
min
min min
min max
min max
min max
min max
min min
v
y y
v v
y
y y
v v
u
x x
u u
x
x x
u u
y
x
y y
v v
x x
u u
v
u

,-y -x T
-y y
-v v
,
x x
u u
S ,v u T M
WV
Window-to-Viewport Transform (cont.)
Multiplying the matrix M
wv
by the point p gives:
( )
( )
(
(
(
(
(
(
(
(
(
(
(

-
+

-
=
1
'
min
min max
min max
min
min
min max
min max
min
v
y y
v v
y y
u
x x
u u
x x
p
Now we need to plug the values into the equation:

Window-to-Viewport Example
( )
( )
(
(
(
(
(
(
(
(
(
(
(

-
+

-
=
1
'
min
min max
min max
min
min
min max
min max
min
v
y y
v v
y y
u
x x
u u
x x
p
x
y
-3
-2
-1
0
1
2
3
-4 -3 -2 -1 1 2 3 4
v
u
0 10 20 30 40 50 60 70 80
0
10
20
30
40
50
60
Window (world) Viewport (screen)
(

min
min

y
x
(

min
min

v
u
(

max
max

v
u
(

max
max

y
x
Window: (x
min
, y
min
) = (-3, -3), (x
max
, y
max
) = (2 , 1)
Viewport: (u
min
, v
min
) = (30, 10), (u
max
, v
max
) = (80, 30)

Window-to-Viewport Example
x
y
-3
-2
-1
0
1
2
3
-4 -3 -2 -1 1 2 3 4
v
u
0 10 20 30 40 50 60 70 80
0
10
20
30
40
50
60
Window (world) Viewport (screen)
(

min
min

y
x
(

min
min

v
u
(

max
max

v
u
(

max
max

y
x
Plugging the values into the equation:
Window-to-Viewport Example
( )
( )
(
(
(
(
(
(
(
(
(
(
(

-
+

-
=
1
'
min
min max
min max
min
min
min max
min max
min
v
y y
v v
y y
u
x x
u u
x x
p
( )
( )
(
(
(
(
(
(
(
(
(
(
(

+


-
+


-
=
1
10
) 3 ( 1
10 30
) 3 (
30
) 3 ( 2
30 80
) 3 (
' y
x
p
(
(
(
(
(
(
(
(

+ - +
+ - +
=
1
10
4
) 3 (
30
5
50
) 3 (
20
y
x
(
(
(

+ - +
+ - +
=
1
10 5 ) 3 (
30 10 ) 3 (
y
x
(
(
(

+
+
=
1
25 5
60 10
y
x
So: Trying some points:
Window-to-Viewport Example
(
(
(

+
+
=
1
25 5
60 10
' y
x
p
(x
min
, y
min
) = (-3, -3) > (30, 10)
(x
max
, y
max
) = (2, 1) >
Left eye = (-1, -.8) >
Top of head = (-0.5, 0.5) >
x
y
-3
-2
-1
0
1
2
3
-4 -3 -2 -1 1 2 3 4
v
u
0 10 20 30 40 50 60 70 80
0
10
20
30
40
50
60
Window (world) Viewport (screen)
(55, 27.5)
(50, 21)
(80, 30)
What if the viewport origin is top-left?

Use the same equation, but subtract the results from
(v
max
+ v
min
)
Window-to-Viewport Transform (cont.)
x
y
-3
-2
-1
0
1
2
3
-4 -3 -2 -1 1 2 3 4
u
v
0 10 20 30 40 50 60 70 80
60
50
40
30
20
10
0
Window (world) Viewport (screen)
(

min
min

y
x
(

min
min

v
u
(

max
max

v
u
(

max
max

y
x
If v
min
= 0, we reverse the results of our equation by
subtracting it from v
max
, i.e., v
max
-> 0 and 0 -> v
max

Rationale:
min
v
v
u
0 10 20 30 40 50 60 70 80
0
10
20
30
40
50
60
Viewport
max
v
) , (
point
arbitrary
v u p =
u
v
0 10 20 30 40 50 60 70 80
60
50
40
30
20
10
0
Viewport (screen)
v
max
v
v v
max
This gives us the correct offset from the new u axis
v v
max
If v
min
was not 0, then we need
a) the offset inside the viewport
b) the offset from the u axis

Rationale (cont)
min
v
v
u
0 10 20 30 40 50 60 70 80
0
10
20
30
40
50
60
Viewport
max
v
) , (
point
arbitrary
v u p =
u
v
0 10 20 30 40 50 60 70 80
60
50
40
30
20
10
0
Viewport
v v
max
So the correct offset is v
max
v + v
min
= v
max
+ v
min
v
v v
max
min
v
min
v
v
max
- v
v
min

Window: (x
min
, y
min
) = (-3, -3), (x
max
, y
max
) = (2 , 1)
Viewport: (u
min
, v
min
) = (30, 10), (u
max
, v
max
) = (80, 30)

Window-to-Viewport Example -
downward pointing v-axis
x
y
-3
-2
-1
0
1
2
3
-4 -3 -2 -1 1 2 3 4
Window (world)
(

min
min

y
x
(

max
max

y
x
u
v
0 10 20 30 40 50 60 70 80
60
50
40
30
20
10
0
Viewport (screen)
(

min
min

v
u
(

max
max

v
u
The equation for this situation is:
Window-to-Viewport Example -
downward pointing v-axis
( ) ( )
(
(
(

+
+
=
(
(
(

+ +
+
=
(
(
(

+ +
+
=
1
15 5
60 10
1
25 5 10 30
60 10
1
25 5
60 10
'
min max
y
x
y
x
y v v
x
p
So: Trying some points:
Window-to-Viewport Example -
downward pointing v-axis
(
(
(

+
+
=
1
15 5
60 10
' y
x
p
(x
min
, y
min
) = (-3, -3) > (30, 30)
(x
max
, y
max
) = (2, 1) >
Left eye = (-1, -.8) >
Top of head = (-0.5, 0.5) >
x
y
-3
-2
-1
0
1
2
3
-4 -3 -2 -1 1 2 3 4
Window (world) Viewport (screen)
(55, 12.5)
(50, 19)
(80, 10)
u
v
0 10 20 30 40 50 60 70 80
60
50
40
30
20
10
0