Window Viewport

7/30/2019 Window Viewport

http://slidepdf.com/reader/full/window-viewport 1/21

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

100

010

201

T

100

020

002

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

100

010

201

T

100

020

002

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,24,2

2,6



Composition Example

STPP

TSPP

100

020

002

100

020

402

100

010

201

100

010

201

100

020

202

100

020

002

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 “worldcoordinates” 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”)

(xmin, ymin)

(xmax, ymax)



• 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)

(umin, vmin)

(umax, vmax)



• You can have multiple viewports

They can contain the same view of a window, different views of the samewindow, 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 viewport’s

3. Translate corner at origin tolower-left corner in viewport

Window-to-Viewport Transform (cont.)

x

y

-3

-2

-1

0

12

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


min

min y

x

min

min v

u

max

max v

u

max

max y

x

minmin and yt xt y x

minmax

minmax

minmax

minmax and y y

vvs

x x

uus y x

minmin and vt ut y x




• The final window-to-viewport transform is:

100

0

0

100

10

01

100

00

00

100

10

01

minminmax

minmaxmin

minmax

minmax

minminmax

minmaxminminmax

minmax

min

min

minmax

minmax

minmax

minmax

min

min

minminminmax

minmax

minmax

minmaxminmin

v y y

vv y

y y

vv

u x xuu x

x xuu

y

x

y y

vv

x x

uu

v

u

,-y-xT -y y

-vv ,

x x

uuS ,vuT M WV




• Multiplying the matrix M wv by the point p gives:

1

' min

minmax

minmax

min

min

minmax

minmaxmin

v y y

vv y y

u x x

uu x x

p



• Now we need to plug the values into the equation:

Window-to-Viewport Example

1

' minminmax

minmaxmin

minminmax

minmaxmin

v y y

vv y y

u x x

uu x x

p

x

y

-3

-2

-1

0

12

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


min

min

y

x

min

min v

u

max

max v

u

max

max y

x



• Window: (xmin, ymin) = (-3, -3), (xmax, ymax) = (2 , 1)

• Viewport: (umin, vmin) = (30, 10), (umax, vmax) = (80, 30)


x

y

-3

-2

-1

0

1

2

3

-4 -3 -2 -1 1 2 3 4

v

u0 10 20 30 40 50 60 70 80

0

10

20

30

40

50

60


min

min y

x

min

min

v

u

max

max v

u

max

max y

x



• Plugging the values into the equation:


1

' minminmax

minmaxmin

minminmax

minmaxmin

v y y

vv y y

u x x

uu x x

p

1

10)3(1

1030

)3(

30)3(2

3080)3(

' y

x

p

1

104)3(

305

50)3(

20 y

x

1

105)3(

3010)3(

y

x

1

255

6010

y

x



• So: Trying some points:


1

255

6010

' y

x

p

(xmin, ymin) = (-3, -3) > (30, 10)

(xmax, ymax) = (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

u0 10 20 30 40 50 60 70 80

0

10

20

30

40

50

60


(55, 27.5)

(50, 21)

(80, 30)



• What if the viewport origin is top-left?

Use the same equation, but subtract the results from

(vmax + vmin)


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


min

min y

x

min

min v

u

max

max v

u

max

max y

x



• If vmin = 0, we reverse the results of our equation by

subtracting it from vmax, i.e., vmax -> 0 and 0 -> vmax

Rationale:

minv

v

u0 10 20 30 40 50 60 70 80

0

10

20

30

40

50

60

Viewport

maxv

),(

point

arbitrary

vu p

u

v

0 10 20 30 40 50 60 70 80

60

50

40

30

20

10

0

Viewport (screen)

v

maxv

vv max

This gives us the correct offset from the new u axis

vv max



If vmin was not 0, then we need

a) the offset inside the viewport

b) the offset from the u axis

Rationale (cont)

minv

v

u0 10 20 30 40 50 60 70 80

0

10

20

30

40

50

60

Viewport max

v

),(

point

arbitrary

vu p

u

v

0 10 20 30 40 50 60 70 80

60

50

40

30

20

10

0

Viewport

vv max

So the correct offset is vmax – v + vmin = vmax + vmin – v

vv max

minv

minv

vmax - v

vmin



• Window: (xmin, ymin) = (-3, -3), (xmax, ymax) = (2 , 1)

• Viewport: (umin, vmin) = (30, 10), (umax, vmax) = (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

xu

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:



1

155

6010

1

2551030

6010

1

255

6010

' minmax y

x

y

x

yvv

x

p



• So: Trying some points:



1

155

6010

' y

x

p

(xmin, ymin) = (-3, -3) > (30, 30)

(xmax, ymax) = (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


(55, 12.5)

(50, 19)

(80, 10)

u

v

0 10 20 30 40 50 60 70 80

60

50

40

30

2010

0

Window Viewport

Documents