Two-Dimensional Viewing

1. Two-Dimensional Viewing Last Updated: 31-03-2010 HB6

2. 2D Viewing Pipeline

3. 2D Viewing Pipeline Modeling coordinates Construct World Coordinate Scene Using Model-Coordinate Transformations World coordinates Convert World Coordinates to Viewing Coordinates Viewing coordinates Transform Viewing Coordinates to Normalized Coordinates Normalized coordinates Map Normalized Coordinates to Device Coordinates Device coordinates From HB-Fig 6-3

4. 2D Viewing Pipeline • 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

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: 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

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

14. Mapping 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. First Step:Mapping to a Normalized Square The mapping from the clipping window to the normalized square is:

18. First Step:Mapping to a Normalized Square • 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).

19. Second Step:Mapping to a Viewport The mapping from the normalized square to the viewport is:

20. Second Step:Mapping to a Viewport This can be expressed in a matrix as:

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

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

24. OpenGL 2D Viewing Pipeline glMatrixMode(GL_MODELVIEW) Modeling coordinates Construct World Coordinate Scene Using Model-Coordinate Transformations Specifies viewing coordinate frame * World coordinates glMatrixMode(GL_PROJECTION); glLoadIdentity(); gluOrtho2D(0.0,1.0,0.0,1.0); // left, right, bottom, top glViewport(0,0,256,256); // startx, starty, xsize, ysize Convert World Coordinates to Viewing Coordinates Viewing coordinates Transform Viewing Coordinates to Normalized Coordinates Normalized coordinates Specifies device coordinates Map Normalized Coordinates to Device Coordinates Device coordinates *in OpenGL, we specify viewing frame in terms of world coordinates

25. OpenGL 2D Viewing OpenGL will take care of the clipping y world clipping window x world Clipping will be covered later

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 2D viewing functions, but it is possible to use the OpenGL 3D viewing functions for viewing a 2D 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); glLoadIdentity();

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: (xwmin, ywmin) = (−1, −1), (xwmax, ywmax) = (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. (xvmin, yvmin) specifies the position of the lower left corner of the viewport, relative to the lower left corner of the display window. vpWidthand 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 VersionExample 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 VersionExample 2/3 void 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 VersionExample 3/3 void main (intargc, 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 VersionExample 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 VersionExample 2/4 void 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 VersionExample 3/4 void 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 VersionExample 4/4 void main (intargc, 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.

39. References • Donald Hearn, M. Pauline Baker, Computer Graphics with OpenGL, Third Edition, Prentice Hall, 2004. • Hill, F. S., Kelly S. M., Computer Graphics Using OpenGL, Third Edition, Pearson Education, 2007, http://www.4twk.com/shill/ • http://www.cs.sjsu.edu/~teoh/teaching/previous/cs116a_fa09/lectures/ (Good) • http://mrl.snu.ac.kr/courses/CourseGraphics/(Most related) • http://210.29.96.235:7878/JwbWeb/TeachRes/kj/9/(Most related) • http://kucg.korea.ac.kr/~sjkim/teach/2001/com336/TP/ (Good) • http://courses.csusm.edu/cs697exz/ (Advanced)