6-Viewing 2D - WordPress.com

Software and s/w Development

Dec 14, 2013 (4 years and 6 months ago)

106 views

1

Two
-
Dimensional Viewing

Last Updated
: 31
-
03
-
2010

HB6

2

2D Viewing Pipeline

3

2D Viewing Pipeline

Construct World Coordinate
Scene Using Model
-
Coordinate
Transformations

Convert World Coordinates to
Viewing Coordinates

Transform Viewing Coordinates
to Normalized Coordinates

Map Normalized Coordinates to
Device Coordinates

Modeling coordinates

World coordinates

Viewing coordinates

Normalized coordinates

Device coordinates

From
HB
-
Fig 6
-
3

4

Procedures for displaying views of a two
-
dimensional
picture on an output device:

Specify which parts of the object to display
(clipping window, or world window, or viewing
window)

Where on the screen to display these parts
(viewport).

Clipping window is the selected section of a scene
that is displayed on a display window.

Viewport is the window where the object is viewed
on the output
device

2D Viewing Pipeline

5

Viewing Effects

Zooming effects

Successively mapping different
-
sized
windows on a fixed
-
sized viewports.

Panning effects

Moving a fixed
-
sized window across the
various objects in a scene.

Device independent

Viewports are typically defined within the
unit square (normalized coordinates)

6

Viewing Coordinate Reference Frame

The reference frame for specifying the world
-
coordinate
window.

Viewing
-
coordinate origin: P
0

= (x
0
, y
0
)

View up vector V
: Define the viewing
y
v

direction

7

Normalization and

Viewport Transforms

8

Normalization and

Viewport Transforms

In

some

graphics

systems,

the

normalization

and

window
-
to
-
viewport

transformations

are

combined

into

one

operation
;

in

this

case

the

viewport

coordinates

are

typically

defined

over

the

range

0
-
1
,

so

that

the

viewport

is

positioned

within

a

unit

square

In

other

graphics

systems,

such

as

OpenGL,

normalization

and

clipping

are

performed

before

the

viewport

transformation
;

in

this

case,

the

viewport

coordinates

are

specified

in

screen

coordinates

relative

to

the

display

window

9

Normalization

When

a

clipping

window

is

mapped

into

a

normalized

viewport

(i
.
e
.

defined

within

the

range

0
-
1
),

the

object

descriptions

are

mapped

into

the

normalized

coordinates

in

a

way

that

maintains

the

relative

placements

of

the

points,

with

respect

to

the

viewport,

as

they

were

with

respect

to

the

clipping

window

10

Mapping to a Normalized Viewport

11

Mapping to a Normalized Viewport

12

Mapping to a Normalized Viewport

13

Mapping to a Normalized Viewport

Although

this

mapping

always

preserves

the

relative

positions

of

objects

within

the

window,

it

only

preserves

the

relative

proportions

of

objects

when

the

aspect

ratio

of

the

viewport

is

the

same

as

the

aspect

ratio

of

the

clipping

window

(i
.
e
.

s
x

=

s
y
)

14

Mapping to a Normalized Viewport

15

Alternate Approach

of Mapping to a Viewport

An

alternative

approach

to

2
D

viewing

is

to

transform

the

clipping

window

into

a

normalized

square,

clip

in

normalized

coordinates,

and

then

transfer

the

scene

description

to

a

viewport

specified

in

screen

coordinates
.

This

is

basically

the

type

of

approach

taken

in

OpenGL
.

16

First Step:

Mapping to a Normalized Square

An

of

this

approach

is

that

it

allows

the

use

of

standardized

clipping

algorithms,

because

the

clip

boundaries

are

always

defined

as

x

=

±
1
,

y

=

±
1
.

17

The mapping from the clipping window to the normalized
square is:

First Step:

Mapping to a Normalized Square

18

This can be expressed in a matrix as
:

General Method:

Translate center of view to origin, then Scale to (
-
1,1) cube, i.e.,

Translate by
-
(
min+max
)/(max
-
min), then scale by 2/(max
-
min).

First Step:

Mapping to a Normalized Square

19

Second Step:

Mapping to a Viewport

The mapping from the normalized square to
the viewport is:

20

This can be expressed in a matrix as:

Second Step:

Mapping to a Viewport

21

Mapping to a Viewport

The

last

step

in

the

viewing

process

is

to

position

the

viewport

area

within

the

display

window

Typically,

the

lower

left

corner

of

the

viewport

is

placed

at

a

coordinate

position

specified

relative

to

the

lower

left

corner

of

the

display

window

As

before,

the

mapping

preserves

the

relative

positions

of

objects

within

the

window,

but

it

only

preserves

the

relative

proportions

of

objects

when

the

aspect

ratio

of

the

viewport

is

the

same

as

the

aspect

ratio

of

the

clipping

window

22

Mapping to a Viewport

If

the

dimensions

of

the

viewport

are

initially

mapped

to

the

entire

area

of

the

display

window,

then

changing

the

aspect

ratio

of

the

display

window

can

cause

objects

to

become

distorted,

unless

the

aspect

ratio

of

the

viewport

is

also

so

that

it

remains

in

correspondence

with

the

aspect

ratio

of

the

new

clipping

window

23

Exercise

Let the clipping window be:

xw
min

= 10,
xw
max

= 200,
yw
min

= 20,
yw
max

= 150

Suppose we want to normalize to (
-
1,1). What is
the normalized coordinates of the point (60,100)?

24

OpenGL 2D Viewing Pipeline

Construct World Coordinate
Scene Using Model
-
Coordinate
Transformations

Convert World Coordinates to
Viewing Coordinates

Transform Viewing Coordinates
to Normalized Coordinates

Map Normalized Coordinates to
Device Coordinates

Modeling coordinates

World coordinates

Viewing coordinates

Normalized coordinates

Device coordinates

glMatrixMode(GL_MODELVIEW)

glMatrixMode(GL_PROJECTION);

gluOrtho2D(0.0,1.0,0.0,1.0); // left, right, bottom, top

glViewport(0,0,256,256); // startx, starty, xsize, ysize

Specifies
viewing
coordinate
frame *

Specifies
device
coordinates

*in OpenGL, we specify viewing frame in terms of world coordinates

25

OpenGL 2D Viewing

y world

x world

clipping window

Clipping will be covered
later

OpenGL will take care of the clipping

26

OpenGL Viewport and Display Windows

Viewport Transformation

The viewport is the rectangle region of the window where the
image is drawn

Defining the viewport

The window system is responsible for opening a window on
the screen

By default, the viewport is

set
to the entire pixel
rectangle

of
the window that’s open

27

2D Viewing Functions in OpenGL

OpenGL

doesn’t

have

any

dedicated

2
D

viewing

functions,

but

it

is

possible

to

use

the

OpenGL

3
D

viewing

functions

for

viewing

a

2
D

scene

28

2D Viewing Functions in OpenGL

The

first

step,

before

selecting

a

clipping

window

and

a

viewport

in

OpenGL,

is

to

establish

the

appropriate

mode

for

constructing

the

viewing

transformation

matrix

(which

maps

objects

from

world

coordinates

to

screen

coordinates)
.

To

do

this,

we

use
:

glMatrixMode(GL_PROJECTION)
;

;

29

2D Viewing Functions in OpenGL

To define a 2D clipping window (which describes the
portion of the scene that will be mapped to the display

window), we can use:

gluOrtho2D(
xwmin
,
xwmax
,
ywmin
,
ywmax
);

If no clipping window is defined, OpenGL uses the

default clipping coordinates:

(
xw
min
,
yw
min
)

=

(−1, −1),

(
xw
max
,
yw
max
) = (1, 1)

30

2D Viewing Functions in OpenGL

To

specify

the

viewport

parameters

we

use
:

glViewport
(

xvmin
,

ywmin
,

vpWidth
,

vpHeight
)
;

All

parameters

are

given

in

integer

screen

coordinates

relative

to

the

display

window
.

(
xv
min
,

yv
min
)

specifies

the

position

of

the

lower

left

corner

of

the

viewport,

relative

to

the

lower

left

corner

of

the

display

window
.

vpWidth

and

vpHeight

represent

the

width

and

height

of

the

viewport

in

pixel

units

By

default,

the

viewport

size

and

position

are

initialized

to

exactly

fit

the

display

window

31

View Port

Simple Version

Example 1/3

#
include

<GL/
glut
.
h
>

void

init

(void)

{

/*

Set

color

of

display

window

to

white
.

*/

glClearColor

(
1
.
0
,

1
.
0
,

1
.
0
,

0
.
0
)
;

/*

Set

parameters

for

world
-
coordinate

clipping

window
.

*/

glMatrixMode

(GL_PROJECTION)
;

gluOrtho
2
D

(
-
100
.
0
,

100
.
0
,

-
100
.
0
,

100
.
0
)
;

/*

Set

mode

for

constructing

geometric

transformation

matrix
.

*/

glMatrixMode

(GL_MODELVIEW)
;

}

32

View Port

Simple Version

Example 2/3

void

displayFcn

(void)

{

glClear

(GL_COLOR_BUFFER_BIT)
;

//

Clear

display

window
.

glColor
3
f

(
0
.
0
,

0
.
0
,

1
.
0
)
;

//

Set

fill

color

to

blue
.

glViewport

(
0
,

0
,

300
,

300
)
;

//

Set

left

viewport
.

glBegin
(GL_TRIANGLES)
;

//

Display

triangle
.

glVertex
2
f

(
-
50
.
0
,

-
25
.
0
)
;

glVertex
2
f

(
50
.
0
,

-
25
.
0
)
;

glVertex
2
f

(
0
.
0
,

50
.
0
)
;

glEnd
()
;

/*

Rotate

triangle

and

display

in

right

half

of

display

window
.

*/

glColor
3
f

(
1
.
0
,

0
.
0
,

0
.
0
)
;

//

Set

fill

color

to

red
.

glViewport

(
300
,

0
,

300
,

300
)
;

//

Set

right

viewport
.

glRotatef

(
90
.
0
,

0
.
0
,

0
.
0
,

1
.
0
)
;

//

Rotate

z

axis
.

glBegin
(GL_TRIANGLES)
;

//

Display

triangle
.

glVertex
2
f

(
-
50
.
0
,

-
25
.
0
)
;

glVertex
2
f

(
50
.
0
,

-
25
.
0
)
;

glVertex
2
f

(
0
.
0
,

50
.
0
)
;

glEnd
()
;

glFlush

(

)
;

}

33

View Port

Simple Version

Example 3/3

void

main

(
int

argc
,

char

**

argv
)

{

glutInit

(&
argc
,

argv
)
;

glutInitDisplayMode

(GLUT_SINGLE

|

GLUT_RGB)
;

glutInitWindowPosition

(
50
,

50
)
;

glutInitWindowSize

(
600
,

300
)
;

glutCreateWindow

("Split
-
Screen

Example")
;

init

(

)
;

glutDisplayFunc

(
displayFcn
)
;

glutMainLoop

(

)
;

}

34

View Port

Professional Version

Example 1/4

#include

<GL/
glut
.
h
>

class

wcPt
3
D

{

public
:

GLfloat

x,

y,

z
;

}
;

void

init

(void)

{

/*

Set

color

of

display

window

to

white
.

*/

glClearColor

(
1
.
0
,

1
.
0
,

1
.
0
,

0
.
0
)
;

/*

Set

parameters

for

world
-
coordinate

clipping

window
.

*/

glMatrixMode

(GL_PROJECTION)
;

glOrtho

(
-
100
.
0
,

100
.
0
,

-
100
.
0
,

100
.
0
,

-
1
.
0
,

1
.
0
)
;

/*

Set

mode

for

constructing

geometric

transformation

matrix
.

*/

glMatrixMode

(GL_MODELVIEW)
;

}

35

View Port

Professional Version

Example 2/4

void

triangle

(
wcPt
3
D

*
verts
)

{

GLint

k
;

glBegin

(GL_TRIANGLES)
;

for

(k

=

0
;

k

<

3
;

k++)

glVertex
3
f

(
verts

[k]
.
x,

verts

[k]
.
y

,

verts

[k]
.
z)
;

glEnd

(

)
;

}

36

View Port

Professional Version

Example 3/4

void

displayFcn

(void)

{

/*

Define

initial

position

for

triangle
.

*/

wcPt
3
D

verts

[
3
]

=

{

{
-
50
.
0
,

-
25
.
0
,

0
.
0
},

{
50
.
0
,

-
25
.
0
,

0
.
0
},

{
0
.
0
,

50
.
0
,

0
.
0
}

}
;

glClear

(GL_COLOR_BUFFER_BIT)
;

//

Clear

display

window
.

glColor
3
f

(
0
.
0
,

0
.
0
,

1
.
0
)
;

//

Set

fill

color

to

blue
.

glViewport

(
0
,

0
,

300
,

300
)
;

//

Set

left

viewport
.

triangle

(
verts
)
;

//

Display

triangle
.

/*

Rotate

triangle

and

display

in

right

half

of

display

window
.

*/

glColor
3
f

(
1
.
0
,

0
.
0
,

0
.
0
)
;

//

Set

fill

color

to

red
.

glViewport

(
300
,

0
,

300
,

300
)
;

//

Set

right

viewport
.

glRotatef

(
90
.
0
,

0
.
0
,

0
.
0
,

1
.
0
)
;

//

Rotate

z

axis
.

triangle

(
verts
)
;

//

Display

red

rotated

triangle
.

glFlush

(

)
;

}

37

View Port

Professional Version

Example 4/4

void

main

(
int

argc
,

char

**

argv
)

{

glutInit

(&
argc
,

argv
)
;

glutInitDisplayMode

(GLUT_SINGLE

|

GLUT_RGB)
;

glutInitWindowPosition

(
50
,

50
)
;

glutInitWindowSize

(
600
,

300
)
;

glutCreateWindow

("Split
-
Screen

Example")
;

init

(

)
;

glutDisplayFunc

(
displayFcn
)
;

glutMainLoop

(

)
;

}

38

View Port

Exercise

Write

a

professional

program

to

display

3

triangles

of

red,

green

&

blue

colors

in

3

different

view

ports

and

a

square

of

magenta

color

in

a

4
th

viewport
.

39

References

1.
Donald Hearn, M. Pauline Baker, Computer Graphics with OpenGL, Third
Edition, Prentice Hall, 2004.

2.
Hill, F. S., Kelly S. M., Computer Graphics Using OpenGL, Third Edition,
Pearson Education, 2007,
http://www.4twk.com/shill/

3.
http://www.cs.sjsu.edu/~teoh/teaching/previous/cs116a_fa09/lectures/

(Good)

4.
http://mrl.snu.ac.kr/courses/CourseGraphics/

(Most related)

5.
http://210.29.96.235:7878/JwbWeb/TeachRes/kj/9/

(Most related)

6.
http://kucg.korea.ac.kr/~sjkim/teach/2001/com336/TP/

(Good)

7.
http://courses.csusm.edu/cs697exz/