Window Viewport

22
CS 455   Computer Graphics Window to Viewport Transformations

Transcript of Window Viewport

Page 1: Window Viewport

7/30/2019 Window Viewport

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

CS 455 – Computer Graphics

Window to Viewport Transformations

Page 2: Window Viewport

7/30/2019 Window Viewport

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

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

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)

Page 3: Window Viewport

7/30/2019 Window Viewport

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

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

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

Page 4: Window Viewport

7/30/2019 Window Viewport

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

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

Page 5: Window Viewport

7/30/2019 Window Viewport

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

   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)

Page 6: Window Viewport

7/30/2019 Window Viewport

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

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

Page 7: Window Viewport

7/30/2019 Window Viewport

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

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

Page 8: Window Viewport

7/30/2019 Window Viewport

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

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

Page 9: Window Viewport

7/30/2019 Window Viewport

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

• 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

Window (“world”)  Viewport (screen)

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

Page 10: Window Viewport

7/30/2019 Window Viewport

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

Window-to-Viewport Transform (cont.)

• 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 

Page 11: Window Viewport

7/30/2019 Window Viewport

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

Window-to-Viewport Transform (cont.)

• 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

Page 12: Window Viewport

7/30/2019 Window Viewport

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

• 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

Window (“world”)  Viewport (screen)

min

min 

 y

 x

min

min v

u

max

max v

u

max

max  y

 x

Page 13: Window Viewport

7/30/2019 Window Viewport

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

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

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

 

Window-to-Viewport Example 

 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

Window (“world”)  Viewport (screen)

min

min  y

 x

min

min

  v

u

max

max v

u

max

max  y

 x

Page 14: Window Viewport

7/30/2019 Window Viewport

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

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

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 

Page 15: Window Viewport

7/30/2019 Window Viewport

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

• So: Trying some points:

Window-to-Viewport Example 

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

Window (“world”)  Viewport (screen)

(55, 27.5)

(50, 21)

(80, 30)

Page 16: Window Viewport

7/30/2019 Window Viewport

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

• What if the viewport origin is top-left?

Use the same equation, but subtract the results from

(vmax + vmin) 

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

Page 17: Window Viewport

7/30/2019 Window Viewport

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

• 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

Page 18: Window Viewport

7/30/2019 Window Viewport

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

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 

Page 19: Window Viewport

7/30/2019 Window Viewport

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

• 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

Page 20: Window Viewport

7/30/2019 Window Viewport

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

• The equation for this situation is:

Window-to-Viewport Example -

downward pointing v-axis

1

155

6010

1

2551030

6010

1

255

6010

' minmax y

 x

 y

 x

 yvv

 x

 p

Page 21: Window Viewport

7/30/2019 Window Viewport

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

• So: Trying some points:

Window-to-Viewport Example -

downward pointing v-axis

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

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

2010

0