1Two-Dimensional ViewingLast Updated: 31-03-2010

HB6

22D Viewing Pipeline

32D 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

5Viewing 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)

6Viewing Coordinate Reference Frame

The reference frame for specifying the world-coordinate window. • Viewing-coordinate origin: P0 = (x0, y0) • View up vector V: Define the viewing yv 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

9NormalizationWhen 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

10Mapping to a Normalized Viewport

minmax

min

minmax

min

xwxwxwxw

xvxvxvxv

minmax

min

minmax

min

ywywywyw

yvyvyvyv

11Mapping to a Normalized Viewport

12Mapping to a Normalized Viewport

13Mapping 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. sx = sy)

14Mapping to a Normalized Viewport

15

Alternate Approachof Mapping to a Viewport

An alternative approach to 2D 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 advantage 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

21Mapping 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

22Mapping 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 adjusted so that it remains in correspondence with the aspect ratio of the new clipping window

23Exercise

Let the clipping window be:xwmin = 10, xwmax = 200, ywmin = 20, ywmax = 150Suppose we want to normalize to (-1,1). What is the normalized coordinates of the point (60,100)?

24OpenGL 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);glLoadIdentity();gluOrtho2D(0.0,1.0,0.0,1.0); // left, right, bottom, topglViewport(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

25OpenGL 2D Viewing

y world

x world

clipping window

Clipping will be covered later

OpenGL will take care of the clipping

26OpenGL 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 rectangleof the window that’s open

272D Viewing Functions in OpenGL

OpenGL doesn’t have any dedicated 2D viewing functions, but it is possible to use the OpenGL 3D viewing functions for viewing a 2D scene

282D Viewing Functions in OpenGL

The first step, before selecting a clipping windowand 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);glLoadIdentity();

292D Viewing Functions in OpenGL

To define a 2D clipping window (which describes the portion of the scene that will be mapped to the displaywindow), we can use:

gluOrtho2D( xwmin, xwmax, ywmin, ywmax);

If no clipping window is defined, OpenGL uses thedefault clipping coordinates: (xwmin, ywmin) = (−1, −1),

(xwmax, ywmax) = (1, 1)

302D 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.(xvmin, yvmin) 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 heightof the viewport in pixel units

By default, the viewport size and position are initializedto 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); gluOrtho2D (-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/3void displayFcn (void) { glClear (GL_COLOR_BUFFER_BIT); // Clear display window. glColor3f (0.0, 0.0, 1.0); // Set fill color to blue. glViewport (0, 0, 300, 300); // Set left viewport. glBegin(GL_TRIANGLES); // Display triangle.

glVertex2f (-50.0, -25.0); glVertex2f (50.0, -25.0); glVertex2f (0.0, 50.0);

glEnd(); /* Rotate triangle and display in right half of display window. */ glColor3f (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 about z axis. glBegin(GL_TRIANGLES); // Display triangle.

glVertex2f (-50.0, -25.0); glVertex2f (50.0, -25.0); glVertex2f (0.0, 50.0);

glEnd();

glFlush ( ); }

33

View Port – Simple Version

Example 3/3void 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 wcPt3D { 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/4void triangle (wcPt3D *verts) { GLint k;

glBegin (GL_TRIANGLES); for (k = 0; k < 3; k++) glVertex3f (verts [k].x, verts [k].y , verts [k].z); glEnd ( ); }

36

View Port – Professional Version

Example 3/4void displayFcn (void) { /* Define initial position for triangle. */ wcPt3D 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.

glColor3f (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. */ glColor3f (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 about z axis. triangle (verts); // Display red rotated triangle.

glFlush ( ); }

37

View Port – Professional Version

Example 4/4void 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 4th viewport.

39References1. 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/ (Advanced)