Computer Graphics Chapter 3 Computer Graphics Software
Outline Graphics Software Packages Introduction to OpenGL Example Program 2
3 Graphics Software Software packages General Programming Graphics Packages GL (Graphics Library, 1980s) [SGI], OpenGL(1992), GKS (Graphical Kernel System, 1984), PHIGS (Programmer s Hierarchical Interactive Graphics System), PHIGS+, VRML(superseded by X3D), Direct3D, Java2D/Java3D Special - Purpose Application Packages CAD /CAM, Business, Medicine, Arts ( for Animation: 3ds Max, Maya [Autodesk, originally Alias (formerly Alias Wavefront)] ) Computer-graphics application programming interface (CG API) A set of graphics functions to let programmers control hardware A software interface between a programming language and the hardware. E.g.: GL, OpenGL, Direct3D
Functions of Graphics Packages Functions provided by general graphics packages are to create and manipulate pictures Graphics Output Primitives: lines, curves, spheres Primitive Attributes: color, line styles Geometric Transformations Viewing Transformations Input Functions: data flow from mouse, joystick, Control Operations 4
Algorithms A number of basic algorithms are needed: Transformation: convert models/primitives from one coordinate system to another Clipping/Hidden surface removal: remove primitives and part of primitives that are not visible on the display Rasterization: convert a projected screen space primitive to a set of pixels. Advanced: Shading and illumination: simulate the highly realistic lighting effect of a scene. Animation: simulate movement by rendering a sequence of frames. Parallel processing & real time rendering for graphics computation, in particular to large and/or natural environments. Physically based graphics modeling and rendering. 5
Graphics Rendering Process Rendering purpose: the conversion of a 3D scene into a 2D image render 2D Image Graphics Rendering Pipeline Fixed graphics Pipeline in hardware Programmable pipeline in hardware 6
Coordinate ( 坐標 ) Representations in Graphics Rendering Pipeline 7 Modeling (local/master) coordinates (MC) A separate coordinates reference frame for object. Local coordinate system (2D or 3D) Define the coordinates for each object individually Scale and unit are varied from object to object World coordinates (WC) A scene reference frame where the objects are placed at appropriate locations. Global coordinate system (2D or 3D) Place all defined objects together in a scene within this reference system MC WC (modeling transformation)
Coordinate Representations in Graphics Rendering Pipeline 8 Viewing and projection coordinates World coordinates positions are transformed though the viewing pipeline to viewing and projection coordinates. (Viewing transformation) Normalized (device) coordinates (NC) Make coordinate independent to any specific output device (device-independent) The scene is stored in normalized coordinates, range from -1 to 1, or 0 to 1. Stage between WC and DC Device (screen) coordinate (DC) Display coordinate system on the output device (e.g, screen) 2D only Platform dependent
Graphics Rendering Pipeline MCS Model Model Modeling Transformations M1 M2 3D World Scene Viewing Transformations V 3D View Scene Model M3 WCS VCS P Clip Normalize 2D/3D Device Scene Rasterization Projection NDCS 2D Image DCS SCS 9 (From CENG477 notes, 09)
Introduction to OpenGL OpenGL (Open Graphics Library) [developed by Silicon Graphics Inc. (SGI) in 1992, and maintained by OpenGL Architectural Review Board (OpenGL ARB), the group of companies that would maintain and expand the OpenGL specification until 2006; by Khronos Group until now ] Khronos Group (http://www.khronos.org/) [a nonprofit industry consortium creating open standards for the authoring and acceleration of parallel computing, graphics, dynamic media, computer vision and sensor processing on a wide variety of platforms and devices. ] 10
Introduction to OpenGL OpenGL (Open Graphics Library) A common graphics library which provides functions for drawings and interactive input. A cross-language, cross-platform API No command for performing windowing tasks No command for handling input Accessible via C/C++, Java http://www.opengl.org 11
Introduction to OpenGL OpenGL basic (core) library (opengl32.lib opengl.lib) Over 250 functions, specifying objects and operations needed to produce interactive 3D graphics OpenGL geometric primitives include points, lines and polygons; specific support for triangle and quadrilateral polygons; quadric (defined by quadratic equation) and NURBES (spline) surface. Texture mapping support. From OpenGL 2.0: Programmable shader support 12
Introduction to OpenGL Related libraries for specific windowing systems GLX: X-Window System (Linux, Unix, OS X) Prefix glx WGL: Microsoft Windows 16 functions Prefix wgl Appel GL (AGL): Apple OpenGL Auxiliary Lib. (glaux.lib) 31 functions, for Windows NT 95, 98, 2000 mainly. Prefix aux 13
Introduction to OpenGL Related libraries OpenGL Utility (GLU) (glu32.lib glu.lib) 43 functions Setting up viewing and projection matrices Complex objects Line and polygon approximations Displaying quadrics, B-splines, surface rendering Prefix glu OpenGL Utility Toolkit (GLUT) (glut32.lib) A windowing application programming interface (API) for OpenGL About 30 functions, for interacting with any screen-windowing system, plus quadric curves and surfaces. Prefix glut 14
OpenGL Utility Toolkit (GLUT) -Written by Mark Kilgard formerly in SGI, now in NVIDIA A window-system independent toolkit NOT a part of OpenGL BUT a windowing API for OpenGL, so no need to know The details of different platform: GLX, WGL, and AGL The details of opening a window and an OpenGL context across operating systems. The details of various input devices, such as keyboard and mouse. Widely used in demonstration programs and literature. 15
GLUT Hello World Open a window display function is defined as void (*func) (void) { }; A callback function which is registered by glutdisplayfunc as a routine to invoke when the window need to be redisplayed. 16
OpenGL Syntax Functions, symbols, and types glbegin, glclear, glcopypixels, glpolygonmode GL_2D, GL_POLYGON, GL_BUFFER_BIT GLbyte, GLshort, GLint, GLfloat, GLdouble Prefix gl Each component word in the function name has its first letter capitalized Arguments are assigned symbolic constants specifying parameter names, values of parameters, or a mode. Constants defined with GL_, and underscores separate words. OpenGL defines its own types which correspond to C types GLbyte: signed char; GLshort:short; GLint: int; GLfloat: float 17
OpenGL Syntax Functions are always named in the following manner glcolor3f(0.0f, 0.0f, 0.0f) gl + actual function name + number of arguments + type of arguments Number of arguments: 2, 3, 4 Type of arguments: s, i, f, d, ub, v (v indicates it s a vector/array) 18
OpenGL Syntax Example glcolor3f(0.0f, 0.4f, 0.8f); This is: 0% Red, 40% Green, 80% Blue glcolor4f(0.1, 0.3, 1.0, 0.5) ; This is: 10% Red, 30% Green, 100% Blue, 50% Opacity GLfloat color[4] = {0.0, 0.2, 1.0, 0.5}; glcolor4fv( color ); It is 0% Red, 20% Green, 100% Blue, 50% Opacity 19
Introduction to OpenGL Compiling: Header Files gl.h, glu.h, glut.h, glaux.h (windows.h for WGL routines) * If you use GLUT to handle the window-managing operations, only #include <glut.h> needed, gl.h and glu.h have been included. Linking: Dynamic Link Lib opengl32.dll glu32.dll glut32.dll 20
An Example of OpenGL Initialize OpenGL and GLUT Initialize a drawing window Draw a line segment 21
22 An Example of OpenGL
An Example of OpenGL //give the initial location for the top-left corner of the display window glutinitwindowposition (50, 100); //set the initial pixel width and height of the display window glutcreatewindowsize (400, 300); Figure 3-2 A 400 by 300 display window at position (50, 100) relative to the top-left corner of the video display. 23
24 End of Chapter 3
Summary Basic display devices Input devices Graphics software packages Graphics rendering pipeline and coordinate representations OpenGL introduction 25
Computer Graphics Chapter 4 Graphics Output Primitives (Part I)
Outline Definition of graphics output primitives Coordinate Reference Frames OpenGL Point Functions OpenGL Line Functions Implementation Algorithm: Line-Drawing Algorithms (Chapter 6) DDA Bresenham 27
Definitions One of the first things when creating a computer-generated picture is to describe various picture components of a virtual scene. To provide the shape or structure of the individual objects To provide their coordinate locations in the scene Graphics output primitive: functions in the CG API describe such picture components Geometric primitives: define the geometry of objects Lines, Triangles, Quadrics, Conic sections, Curved surfaces, 28
Coordinate Reference Frames World coordinate system Cartesian coordinates ( 笛卡尔坐标 ) A right hand coordinate system +Y Label the axes as X (horizontal) Y (vertical) Z (in 3D) Origin is in the lower left Y Axis (0,0) X Axis +X 29
Partition Space into Pixels Object information, such as the coordinates, colors, is passed to the viewing routines. Rasterization ( 光柵化 ) 30 Map the 3D objects to positions on the 2D screen Scan-conversion methods Converts vector images (primitives such as lines, circles, etc.) into raster images (integer pixel values) Geometric description discrete pixel representation
Screen Coordinate System Screen: 2D coordinate system (W*H) Two definitions for screen coordinate system: For hardware processes, such as screen refreshing, the origin is at the top-left corner of the screen y - scan line number; x - column number. For software, the origin is at the low-left corner (OpenGL convention) +Y Y Axis Quick review: What s the pixel? 31 Correspond to the pixel positions in the frame buffer (0,0) X Axis +X
pixel is a screen spot. 3 How to represent each pixel position by the screen coordinates? Is it a square or a point? From a geometry point of view, a pixel is a point. Q: Where is the pixel P(2,1) on the screen? 2 1 32 0 1 2 3 4 5
Therefore, when we think about images, a pixel is a rectangle or the inscribed circle. Q: Where is P(2,1) on the screen? A: the center of a pixel located. 2 1 0 33 0 1 2 3 4
Basic OpenGL Point Structure In OpenGL, to specify a point: glvertex*(); (*) indicates the suffix codes needed glvertex2i(80, 100), glvertex2f(58.9, 90.3) glvertex3i(20, 20, -5), glvertex3f(-2.2, 20.9, 20) [ gl + actual function name + number of arguments + type of arguments ] Must put within a glbegin/glend pair glbegin(gl_points); glvertex2i(50, 100); glvertex2i(75, 150); glvertex2i(100, 200); glend(); Symbolic constant The form of a point position in OpenGL spec.: glbegin (GL_POINTS); glvertex* (); glend (); 34
OpenGL Point Functions Some examples of specifying points in OpenGL //Specify the coordinates of points in arrays; then call the OpenGL functions int point1 [] = {50, 100}; int point2 [] = {75, 150}; int point3 [] = {100, 200}; glbegin (GL_POINTS); glvertex2iv (point1); glvertex2iv (point2); glvertex2iv (point3); glend (); 35 //Specify the points in 3D world reference frame glbegin (GL_POINTS); glvertex3f (-78.05, 909.72, 14.60); glvertex3f (261.91, -5200.67, 188.33); glend ();
OpenGL Point Functions Some examples of specifying points in OpenGL (cont.) // In C++, define a C++ class or structure of a point class wcpt2d { public: GLfloat x, y; }; wcpt2d pointpos; pointpos.x = 120.75; pointpos.y = 45.30; glbegin (GL_POINTS); glvertex2f (pointpos.x, pointpos.y); glend (); 36
OpenGL Line Functions In OpenGL, to specify one or more straight-line segments: glbegin (GL_LINES); glvertex2iv (p1); glvertex2iv (p2); glvertex2iv (p3); glvertex2iv (p4); glvertex2iv (p5); glend (); p2 p3 p1 p4 glbegin (GL_LINE_STRIP); glvertex2iv (p1); glvertex2iv (p2); glvertex2iv (p3); glvertex2iv (p4); glvertex2iv (p5); glend (); p5 p2 p3 p1 p4 37
OpenGL Line Functions In OpenGL, to specify one or more straight-line segments (cont.): glbegin (GL_LINE_LOOP); glvertex2iv (p1); glvertex2iv (p2); glvertex2iv (p3); glvertex2iv (p4); glvertex2iv (p5); glend (); p5 p2 p3 p4 p1 38
Implementation Algorithm: Line drawing algorithms Digital Differential Analyzer (DDA) Bresenham s Line Algorithm 39
Line-Drawing Algorithms The ideal line Continuous appearance Uniform thickness and brightness Line on a raster monitor Screen: discrete pixels Digitize the line into a set of discrete integer positions approximating the actual line path. 40
Line-Drawing Algorithms (17,8) (2,2) Discretization - converting a continuous signal into discrete elements. Scan conversion line-drawing algorithm: convert the line information into pixel data for display 41
Line-Drawing Algorithms How to calculate the pixel positions along a straight-line path The line equation (slope-intercept equation): any point (x, y) on the line must follow it. y = m x + b, where m is the slope ( 斜率 ) of the line. b is the intercept on y-axis. If we have two endpoints, (x 0, y 0 ) and (x end, y end ), then m and b can be calculated as: m = y / x = (y end y 0 ) / (x end x 0 ) b = y 0 -m. x 0 42
Line-Drawing Algorithms On raster system, the line is approximated by pixels. How good it is, decided by: how to sample a line at discrete positions (step sizes of the calculation in the horizontal (x) and vertical (y) directions) 43 which is the nearest pixel to the line at each sampled position. Two line-drawing algorithms: (1) DDA (Digital Differential Analyzer). (2) Bresenham s Line Algorithm.
(1) Line drawing DDA algorithm (DDA) is a scan-conversion line algorithm based on calculating either y or x. Each point is generated from the previous point Take a unit step with one coordinate and calculate the corresponding value for another Slope of a line m = Δy/Δx y = m x or x = y / m x Different cases based on the sign of the slope, value of the slope, and the direction of drawing. Slope sign: positive or negative. Slope value: <= 1 or >1. Direction: (left right) or (right left) II III I IV y 44 Four Quadrants
DDA algorithm // if m <1, x =1. // if m >1, y =1. y = m x x = y / m a low level procedure to store the current color into the frame buffer at (x, y) 45
Line drawing DDA algorithm DDA summary 1.Go to starting point 2.Increment x and y values Step size: - one unit (in x or y direction) - calculating corresponding value for another 3.Round to the closest raster position Merits Relative fast: replace the multiplication by using the increments of x or y directions to step from one pixel to another. Drawbacks Divisions needed to set increment values The use of floating-point arithmetic Rounding operations to an integer 46
(2) Bresenham s Line Algorithm An efficient algorithm for line drawing Using only integer addition/subtraction We have a point (x k, y k ), then at each sampling step Two possible pixel positions: A (x k +1, y k ) and B (x k +1, y k +1) To decide which is closer to the line path d B B d A A The vertical axes show scan-line positions; The horizontal axes identify pixel columns. 47
Bresenham s Line Algorithm for m <1.0 1. Input the two line endpoints and store the left one (x0, y0). 2. Plot (x0, y0) to be the first point (set the color for frame buffer position (x0, y0)). 3. Calculate the constants x, y, 2 y, and 2 y 2 x, and obtain the starting value for the decision parameter as p 0 = 2 y x. 4. At each x k along the line, starting at k = 0, perform the following test. If p k < 0, plot (x k +1, y k ) and p k+1 = p k +2 y y k +1 d upper B Otherwise, plot (x k +1, y k +1) and p k+1 = p k +2 y 2 x. y y k A d lower 5. Perform step 4 x 1 times. x k +1 48
Bresenham s Line Algorithm Example Note: This Bresenham s algorithm is used when slope m < 1. Example 3-1: Using Bresenham s Line-Drawing Algorithm, digitize the line with endpoints (20,10) and (30,18). -- y = 18 10 = 8 -- x = 30 20 = 10 -- m = y / x = 0.8 plot the first point (x0, y0) = (20, 10) p0 = 2 y x = 2 8 10 = 6, so the next point is (21, 11) The next point is (x k+1, y k+1 ) 49
Bresenham s Line Algorithm Example The successive pixel positions along the line path can be determined from the decision parameter as K P k (x k +1, y k +1 ) K P k (x k +1, y k +1 ) 0 6 (21,11) 5 6 (26,15) 1 2 (22,12) 6 2 (27,16) 2-2 (23,12) 7-2 (28,16) 3 14 (24,13) 8 14 (29,17) 4 10 (25,14) 9 10 (30,18) y = 8; x = 10 P k > 0: P k+1 = P k + 2 y 2 x P k < 0: P k+1 = P k + 2 y 50
Bresenham s Line Algorithm Example Pixel positions along the line path between endpoints (20, 10) and (30, 18), plotted with Bresenham s algorithm. (20, 10); (21,11); (22,12); (24,13); (25,14); ; (30,18). 51
Bresenham s Line Algorithm for m <1.0 P k < 0: P k+1 = P k + 2 y P k > 0: P k+1 = P k + 2 y 2 x 52
Setting Frame Buffer Values The final stage of line segment implementation is to set the framebuffer color values. Suppose: The frame buffer is stored in memory as an addressable array. The frame buffer array is stored row by row (row-major order). Pixel positions are labeled from (0,0) at the lower-left screen corner to (x max, y max ) at the top-right corner. 53 For a bilevel (one bit per pixel) system, the frame buffer bit address for the pixel at (x, y): addr(x, y) = addr(0, 0) + y (x max + 1) + x
Summary OpenGL output primitives functions Point and line Line drawing algorithm DDA Bresenham 54
55 END
DDA case 1 (1 st quadrant) Positive slope; left to right: If 0 <= m <= 1 then: x k+1 = x k + 1 y k+1 = y k + m (rounded to the nearest integer corresponding to a screen pixel position in x coordinate) If m > 1 then: x k+1 = x k + 1/m y k+1 = y k + 1 y = m x x = y / m I 56 Four Quadrants
DDA case 2 (3 rd quadrant) Positive slope; right to left: If 0 < m <= 1 then: x k+1 = x k 1 y k+1 = y k m y = m x x = y / m If m > 1 then: x k+1 = x k 1/m y k+1 = y k 1 III 57 Four Quadrants
DDA case 3 (4 th quadrant) Negative slope; left to right: If m <= 1 then: x k+1 = x k + 1 y k+1 = y k m y = m x x = y / m If m > 1 then: x k+1 = x k + 1/ m y k+1 = y k 1 58 Four Quadrants IV
DDA case 4 (2 nd quadrant) Negative slope; right to left: If m <= 1 then: x k+1 =? x k 1 y k+1 =? y k + m II y = m x x = y / m If m > 1 then: x k+1 =? x k 1/ m y k+1 =? y k + 1 59 Four Quadrants
Bresenham s Line Algorithm Consider lines with positive slope less than 1.0: At sampling point x k +1, we label vertical pixel separations from the mathematical line path as d lower and d upper. After calculating d lower and d upper we will choose y k or y k +1. y = m (x k + 1) + b 60 d lower = y y k = m (x k + 1) + b y k d upper = (y k +1) y = y k +1 - m (x k + 1) b An efficient test: d lower d upper = 2m x k + 2m 2y k + 2b 1 = 2m (x k + 1) 2y k + 2b 1 B C A y = m x + b
Bresenham s Line Algorithm To derive the decision parameter for the kth step: p k d lower d upper = 2m (x k + 1) 2y k + 2b 1 m = y / x x (d lower d upper ) = 2 y (x k + 1) x (2y k 2b +1) = 2 y x k 2 x y k + c where c = 2 y + x (2b 1) is a constant; and k represents the kth step. p k = x (d lower d upper ) = 2 y x k 2 x y k + c 61
Bresenham s Line Algorithm p k = x (d lower d upper ) = 2 y x k 2 x y k + c If p k < 0 (i.e. d lower < d upper ) we plot the pixel A (x k +1, y k ) Otherwise we plot the pixel B (x k +1, y k +1) y k +1 y y k d upper B A C d lower x k +1 62
Bresenham s Line Algorithm Go on to the next step, we need to decide the p k+1 :p k p k+1 From p k = 2 y x k 2 x y k + c, we can get p k+1 = 2 y x k+1 2 x y k+1 + c, where c = 2 y + x (2b 1) is a constant Therefore, x k+1 = x k + 1 p k+1 p k = 2 y (x k+1 x k ) 2 x (y k+1 y k ) p k+1 = p k +2 y 2 x (y k+1 y k ) 0 or 1, depending on the sign of p k The first parameter p 0 = 2 y x hint: from (x0, y0) and m= y/ x, k = 0. y 0 +1 y d upper d lower y 0 63 x 0 +1