Window to Viewport Mapping

Acknowledgements
Some of the material for the slides were adapted from Rick Parent Some of the images were taken from
Hearn, Baker, and Carithers, Computer Graphics with OpenGL

Figure 3-1 The transformation sequence from modeling coordinates to device coordinates for a three-dimensional scene. Object shapes can be individually defined in modeling-coordinate reference systems. Then the shapes are positioned within the world-coordinate scene. Next, world-coordinate specifications are transformed through the viewing pipeline to viewing and projection coordinates and then to normalized coordinates. At the final step, individual device drivers transfer the normalizedcoordinate representation of the scene to the output devices for display.

Coordinate Systems
Four Cartesian co-ordinates systems in computer Graphics. 1. Modeling co-ordinates 2. World co-ordinates 3. Normalized device co-ordinates 4. Device co-ordinates Modeling coordinate is also known as local coordinate. Ex: where individual object in a scene within separate coordinate reference frames. Each object has an origin (0,0) So the part of the objects are placed with reference to the objects origin. In term of scale it is user defined, so, coordinate values can be any size.

Coordinate Systems
World Coordinate
The world coordinate system describes the relative positions and orientations of every generated objects. The scene has an origin (0,0). The object in the scene are placed with reference to the scenes origin. World co-ordinate scale may be the same as the modeling coordinate scale or it may be different. However, the coordinates values can be any size (similar to MC)

Coordinate Systems
Normalized Device Coordinate Output devices have their own co-ordinates. Co-ordinates values: The x and y axis range from 0 to 1 All the x and y co-ordinates are floating point numbers in the range of 0 to 1 This makes the system independent of the various devices coordinates. This is handled internally by graphic system without user awareness.

Coordinate Systems
Device Coordinates Specific co-ordinates used by a device. Pixels on a monitor Points on a laser printer. mm on a plotter.

The transformation based on the individual device is handled by computer system without user concern.

Coordinate Systems
World Coordinate System - This is object space or the space in which the application model is defined. Screen Coordinate System - The space in which the image is displayed. World Window (or clipping) - This is the rectangle in the world defining the region that is to be displayed. Interface Window - The window opened on the raster graphics screen in which the image will be displayed. Viewport - The rectangular portion of the interface window that defines where the image will actually appear (usually the entire interface window but in some cases modified to be a portion of the interface window). Viewing Transformation - The process of mapping a world window in World Coordinates to the Viewport.

World Coordinate System

Application specific difficult to work directly in screen coordinates

10 feet 20 feet

Screen Coordinate System

- 2D Regular Cartesian Grid - Origin (0,0) at lower left corner (OpenGL convention) - Horizontal axis x Vertical axis y - Pixels are defined at the grid (0,0) intersections - This coordinate system is defined relative to the display window origin (OpenGL: the lower left corner of the window)

(2,2)

Define a world window

World Window
World window a rectangular region in the world that is to be displayed
W_T W_B Define by W_L, W_R, W_B, W_T

W_L

Use OpenGL command: gluOrtho2D(left,right,bottom, top) glOrtho(left,right, bottom, top, W_R near, far)

Viewport
The rectangular region in the screen for displaying the graphical objects defined in the world window Defined in the screen coordinate system
glViewport(int left, int bottom, int (right-left), int (top-bottom));

V_T

V_B V_L V_R

To draw in world coordinate system

Two tasks need to be done

Define a rectangular world window (call an OpenGL function) Define a viewport (call an OpenGL function) Perform window to viewport mapping (OpenGL internals will do this for you)

Window to viewport mapping

Window-to-Viewport mapping is the process of mapping or transforming a two-dimensional, world-coordinate scene to device coordinates. In particular, objects inside the world or clipping window are mapped to the viewport. The viewport is displayed in the interface window on the screen. In other words, the clipping window is used to select the part of the scene that is to be displayed. The viewport then positions the scene on the output device.

Window to viewport mapping

The objects in the world window will then be drawn onto the viewport
(x,y)

World window

viewport
(Sx, Sy)

Window to viewport mapping

How to calculate (sx, sy) from (x,y)?
(x,y) (Sx, Sy)

Window to viewport mapping

First thing to remember you dont need to do it by yourself. OpenGL will do it for you
You just need to define the viewport (with glViewport()), and the world window (with gluOrtho2D())

But we will look under the hood

Also, one thing to remember

A practical OpenGL issue

Before calling gluOrtho2D(), you need to have the following two lines of code
glMatrixMode(GL_PROJECTION); glLoadIdentity(); gluOrtho2D(Left, Right, Bottom, Top);

Window to viewport mapping

Things that are given:
The world window (W_L, W_R, W_B, W_T) The viewport (V_L, V_R, V_B, V_T) A point (x,y) in the world coordinate system

Calculate the corresponding point (sx, sy) in the screen coordinate system

Window to viewport mapping

Basic principle: the mapping should be proportional
(x,y) (sx,sy)

(x W_L) / (W_R W_L) (y - W_B) / (W_T W_B)

= =

(sx V_L) / (V_R V_L) (sy V_B) / (V_T V_B)

Window to viewport mapping

(sx,sy)

(x,y)

(x W_L) / (W_R W_L) (y - W_B) / (W_T W_B)

= =

(sx V_L) / (V_R V_L) (sy V_B) / (V_T V_B)

sx = x * (V_R-V_L)/(W_R-W_L) - W_L * (V_R V_L)/(W_R-W_L) + V_L sy = y * (V_T-V_B)/(W_T-W_B) W_B * (V_T-V_B)/(W_T-W_B) + V_B

Some practical issues

How to set up an appropriate world window automatically? How to zoom in the picture? How to set up an appropriate viewport, so that the picture is not going to be distorted?

World window setup

The basic idea is to see all the objects in the world
This can just be your initial view, and the user can change it later

How to achieve it?

World window set up

Find the world coordinates extent that will cover the entire scene
max Y

min Y min X max X

Zoom into the picture

Shrink your world window call gluOrtho2D() with a new range

Viewport

Non-distorted viewport setup

Distortion happens when World window and display window have different aspect ratios Aspect ratio? R=W/H

Compare aspect ratios

World window Aspect Ratio = R

W Display window Aspect Ratio = W / H

R> W/H

Match aspect ratios

H

R
World window Aspect Ratio = R Display window Aspect Ratio = W / H

?
W

R> W/H

Match aspect ratios

H

R
World window Aspect Ratio = R Display window Aspect Ratio = W / H

W/R
W

R> W/H

glViewport(0, 0, W, W/R)

Compare aspect ratios

H

World window Aspect Ratio = R

W Display window Aspect Ratio = W / H

R< W/H

Match aspect ratios

?
H

World window Aspect Ratio = R

W Display window Aspect Ratio = W / H

R< W/H

Match aspect ratios

H*R
H

World window Aspect Ratio = R

W Display window Aspect Ratio = W / H

R< W/H

glViewport(0, 0, H*R, H)

When to call glViewport() ?

Two places: Initialization
Default: same as the window size

When the user resizes the display window

Resize (Reshape) window

Void main(int argc, char** argv) { glutDisplayFunc(display); glutReshapeFunc(resize); glutKeyboardFunc(key); }

void resize () a function provided by you. It will be called when the window changes size.

Resize (reshape) window

Void resize(int W, int H) { glViewport(0,0,W, H); } This is done by default in GLUT You can use the call to make sure the aspect ratio is fixed that we just discussed.

An Example
#include<GL/glut.h> void drawSquare(void) { glBegin(GL_POLYGON); //initiates polygon and starts list of vertices glVertex3f(5,5,0); //defines vertex at position x=5, y=5, z=0 glVertex3f(10,5,0); //defines vertex at position x=10, y=5, z=0 glVertex3f(10,10,0); //defines vertex at position x=10, y=10, z=0 glVertex3f(5,10,0); //defines vertex at position x=5, y=10, z=0 glEnd(); //terminates the list of vertices for polygon } void display(void) { glClear(GL_COLOR_BUFFER_BIT); //clears window to prepare it for drawing //sets the Red, Green, Blue float values to full green for the color in //which to draw glColor3f(0.0, 1.0, 0.0); //specifies a 100x100 viewport in pixels whose lower-left corner is at //(100, 0)measured from the origin of the window glViewport(100, 0, 100, 100); drawSquare(); glFlush(); /forces any buffered OpenGL commands to execute }

An Example
glutInit(&argc, argv); /* the buffering mode, the color, and the depth mode, for display */ glutInitDisplayMode(GLUT_SINGLE | GLUT_RGB | GLUT_DEPTH); /*specifies the initial top-left corner of the window as 100x100 in pixels*/ glutInitWindowPosition(100,100); /*specifies the initial height and width of the window as 200x200 in pixels*/ glutInitWindowSize(200,200); /*creates a window on the display with title "square"*/ glutCreateWindow("square"); /*sets the Red, Green, Blue, Alpha clear color to full red to use when clearing the color buffer */ glClearColor(1.0, 0.0, 0.0, 0.0); /*specifies that the projection matrix will be the matrix affected by subsequent transformations*/ glMatrixMode(GL_PROJECTION); int main(int argc, char **argv) { /*initializes the OpenGL utilities toolkit,taking as parameters the arguments from the main function*/

An Example
/*sets the current transformation matrix (the projection matrix) to an identity matrix */ glLoadIdentity(); //defines orthographic two-dimensional viewing glOrtho(0.0, 10.0, 0.0, 10.0, -1.0, 1.0); /*registers display() as the call back function to redraw the window */ glutDisplayFunc(display); /*causes the program to enter an event-processing loop*/ glutMainLoop(); return 0; }