Introduction to Computer Graphics

Introduction to Computer Graphics
Ed Angel Professor of Computer Science, Electrical and Computer Engineering, and Media Arts Director, Arts Technology Center University of New Mexico Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009
Overview These lectures are for CS/EECE 433 Computer Graphics at the University of New Mexico Senior/graduate elective Ed Angel, Interactive Computer Graphics, A Top-down Approach with OpenGL (Fifth Edition), Addison-Wesley These lectures cover Chapters 1-6 in detail and survey Chapters 7-12 Each ppt file corresponds to one 50 minute lecture (a few require a bit more time) Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Contact Information CS Office FEC 301F (505) ARTS Lab Office (505) Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Objectives Broad introduction to Computer Graphics Software Hardware Applications Top-down approach OpenGL Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Prerequisites Good programming skills in C (or C++) Basic Data Structures Linked lists Arrays Geometry Simple Linear Algebra Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Requirements 3 Assigned Projects Simple Interactive 3D Term Project You pick See for assignments and projects Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Resources Can run OpenGL on any system Windows Linux Mac Get GLUT from web if needed Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

References Other helpful references OpenGL: A Primer, Ed Angel, Addison-Wesley, (Third Edition), 2008 Designed for students who need more programming information The OpenGL Programmer’s Guide (the Redbook) and the OpenGL Reference Manual (The Blue book), Addison-Wesley, The definitive references Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Web Resources Additional materials available to instructors through their Addison-Wesley representatives Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Outline: Part 1 Part 1: Introduction Text: Chapter 1 Lectures 1-3 What is Computer Graphics? Applications Areas History Image formation Basic Architecture Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Outline: Part 2 Part 2: Basic OpenGL Text: Chapters 2-3 Lectures 4-9 Architecture GLUT Simple programs in two and three dimensions Interaction Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Outline: Part 3 Part 3: Three-Dimensional Graphics Text: Chapters 4-6 Lectures 10-20 Geometry Transformations Homogeneous Coordinates Viewing Shading Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Outline: Part 4 Part 5: Implementation Text: Chapter 7 Lectures: 21-23 Approaches (object vs image space) Implementing the pipeline Clipping Line drawing Polygon Fill Display issues (color) Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Outline: Part 5 Part 4: Discrete Methods Text: Chapter 8 Lectures 24-27 Buffers Bitmaps and Pixel Maps Texture Mapping Compositing and Transparency Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Outline: Part 6 Part 6: Programmable Pipelines Text: Chapter 9 Lectures 28-30 Shading Languages GLSL Vertex Shaders Fragment Shaders Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Outline: Part 7 Part 7: Hierarchy and Procedural Methods Text: Chapters 10-11 Lectures: 31-34 Tree Structured Models Traversal Methods Scene Graphs Particle Systems Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Outline: Part 8 Part 8: Curves and Surfaces Text: Chapter 12 Lectures: 35-39 Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Outline: Part 9 Part 9: Advanced Rendering Text: Chapter 13 Lectures: 40-42 Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Extra Lectures Marching Squares Virtual Trackball Display Issues Fractals Sampling and Aliasing Bump Mapping Environment Mapping Reflection and Transmission Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

What is Computer Graphics?
Ed Angel Professor of Computer Science, Electrical and Computer Engineering, and Media Arts University of New Mexico Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Objectives In this lecture, we explore what computer graphics is about and survey some application areas We start with a historical introduction Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Computer graphics deals with all aspects of creating images with a computer Hardware Software Applications Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Example Where did this image come from? What hardware/software did we need to produce it? Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Preliminary Answer Application: The object is an artist’s rendition of the sun for an animation to be shown in a domed environment (planetarium) Software: Maya for modeling and rendering but Maya is built on top of OpenGL Hardware: PC with graphics card for modeling and rendering Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Basic Graphics System Output device Input devices Image formed in FB Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

CRT Can be used either as a line-drawing device (calligraphic) or to display contents of frame buffer (raster mode) Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Computer graphics goes back to the earliest days of computing Strip charts Pen plotters Simple displays using A/D converters to go from computer to calligraphic CRT Cost of refresh for CRT too high Computers slow, expensive, unreliable Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Wireframe graphics Draw only lines Sketchpad Display Processors Storage tube wireframe representation of sun object Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Sketchpad Ivan Sutherland’s PhD thesis at MIT Recognized the potential of man-machine interaction Loop Display something User moves light pen Computer generates new display Sutherland also created many of the now common algorithms for computer graphics Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Display Processor Rather than have the host computer try to refresh display use a special purpose computer called a display processor (DPU) Graphics stored in display list (display file) on display processor Host compiles display list and sends to DPU Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Direct View Storage Tube
Created by Tektronix Did not require constant refresh Standard interface to computers Allowed for standard software Plot3D in Fortran Relatively inexpensive Opened door to use of computer graphics for CAD community Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Raster Graphics Beginning of graphics standards IFIPS GKS: European effort Becomes ISO 2D standard Core: North American effort 3D but fails to become ISO standard Workstations and PCs Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Raster Graphics Image produced as an array (the raster) of picture elements (pixels) in the frame buffer Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Raster Graphics Allows us to go from lines and wire frame images to filled polygons Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

PCs and Workstations Although we no longer make the distinction between workstations and PCs, historically they evolved from different roots Early workstations characterized by Networked connection: client-server model High-level of interactivity Early PCs included frame buffer as part of user memory Easy to change contents and create images Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Realism comes to computer graphics smooth shading environment mapping bump mapping Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Special purpose hardware Silicon Graphics geometry engine VLSI implementation of graphics pipeline Industry-based standards PHIGS RenderMan Networked graphics: X Window System Human-Computer Interface (HCI) Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

OpenGL API Completely computer-generated feature-length movies (Toy Story) are successful New hardware capabilities Texture mapping Blending Accumulation, stencil buffers Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Photorealism Graphics cards for PCs dominate market Nvidia, ATI Game boxes and game players determine direction of market Computer graphics routine in movie industry: Maya, Lightwave Programmable pipelines Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Image Formation Ed Angel
Professor of Computer Science, Electrical and Computer Engineering, and Media Arts University of New Mexico Angel: Interactive Computer Graphics5E © Addison-Wesley 2009

Angel: Interactive Computer Graphics5E © Addison-Wesley 2009
Objectives Fundamental imaging notions Physical basis for image formation Light Color Perception Synthetic camera model Other models Angel: Interactive Computer Graphics5E © Addison-Wesley 2009

Image Formation In computer graphics, we form images which are generally two dimensional using a process analogous to how images are formed by physical imaging systems Cameras Microscopes Telescopes Human visual system Angel: Interactive Computer Graphics5E © Addison-Wesley 2009

Elements of Image Formation
Objects Viewer Light source(s) Attributes that govern how light interacts with the materials in the scene Note the independence of the objects, the viewer, and the light source(s) Angel: Interactive Computer Graphics5E © Addison-Wesley 2009

Light Light is the part of the electromagnetic spectrum that causes a reaction in our visual systems Generally these are wavelengths in the range of about nm (nanometers) Long wavelengths appear as reds and short wavelengths as blues Angel: Interactive Computer Graphics5E © Addison-Wesley 2009

Ray Tracing and Geometric Optics
One way to form an image is to follow rays of light from a point source finding which rays enter the lens of the camera. However, each ray of light may have multiple interactions with objects before being absorbed or going to infinity. Angel: Interactive Computer Graphics5E © Addison-Wesley 2009

Luminance and Color Images
Luminance Image Monochromatic Values are gray levels Analogous to working with black and white film or television Color Image Has perceptional attributes of hue, saturation, and lightness Do we have to match every frequency in visible spectrum? No! Angel: Interactive Computer Graphics5E © Addison-Wesley 2009

Three-Color Theory Human visual system has two types of sensors Rods: monochromatic, night vision Cones Color sensitive Three types of cones Only three values (the tristimulus values) are sent to the brain Need only match these three values Need only three primary colors Angel: Interactive Computer Graphics5E © Addison-Wesley 2009

Shadow Mask CRT Angel: Interactive Computer Graphics5E © Addison-Wesley 2009

Additive and Subtractive Color
Additive color Form a color by adding amounts of three primaries CRTs, projection systems, positive film Primaries are Red (R), Green (G), Blue (B) Subtractive color Form a color by filtering white light with cyan (C), Magenta (M), and Yellow (Y) filters Light-material interactions Printing Negative film Angel: Interactive Computer Graphics5E © Addison-Wesley 2009

Pinhole Camera Use trigonometry to find projection of point at (x,y,z) xp= -x/z/d yp= -y/z/d zp= d These are equations of simple perspective Angel: Interactive Computer Graphics5E © Addison-Wesley 2009

Synthetic Camera Model
projector p image plane projection of p center of projection Angel: Interactive Computer Graphics5E © Addison-Wesley 2009

Advantages Separation of objects, viewer, light sources Two-dimensional graphics is a special case of three-dimensional graphics Leads to simple software API Specify objects, lights, camera, attributes Let implementation determine image Leads to fast hardware implementation Angel: Interactive Computer Graphics5E © Addison-Wesley 2009

Global vs Local Lighting
Cannot compute color or shade of each object independently Some objects are blocked from light Light can reflect from object to object Some objects might be translucent Angel: Interactive Computer Graphics5E © Addison-Wesley 2009

Why not ray tracing? Ray tracing seems more physically based so why don’t we use it to design a graphics system? Possible and is actually simple for simple objects such as polygons and quadrics with simple point sources In principle, can produce global lighting effects such as shadows and multiple reflections but ray tracing is slow and not well-suited for interactive applications Angel: Interactive Computer Graphics5E © Addison-Wesley 2009

Models and Architectures

Objectives Learn the basic design of a graphics system Introduce pipeline architecture Examine software components for an interactive graphics system Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Image Formation Revisited
Can we mimic the synthetic camera model to design graphics hardware software? Application Programmer Interface (API) Need only specify Objects Materials Viewer Lights But how is the API implemented? Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Physical Approaches Ray tracing: follow rays of light from center of projection until they either are absorbed by objects or go off to infinity Can handle global effects Multiple reflections Translucent objects Slow Must have whole data base available at all times Radiosity: Energy based approach Very slow Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Practical Approach Process objects one at a time in the order they are generated by the application Can consider only local lighting Pipeline architecture All steps can be implemented in hardware on the graphics card application program display Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Vertex Processing Much of the work in the pipeline is in converting object representations from one coordinate system to another Object coordinates Camera (eye) coordinates Screen coordinates Every change of coordinates is equivalent to a matrix transformation Vertex processor also computes vertex colors Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Projection Projection is the process that combines the 3D viewer with the 3D objects to produce the 2D image Perspective projections: all projectors meet at the center of projection Parallel projection: projectors are parallel, center of projection is replaced by a direction of projection Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Primitive Assembly Vertices must be collected into geometric objects before clipping and rasterization can take place Line segments Polygons Curves and surfaces Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Clipping Just as a real camera cannot “see” the whole world, the virtual camera can only see part of the world or object space Objects that are not within this volume are said to be clipped out of the scene Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Rasterization If an object is not clipped out, the appropriate pixels in the frame buffer must be assigned colors Rasterizer produces a set of fragments for each object Fragments are “potential pixels” Have a location in frame bufffer Color and depth attributes Vertex attributes are interpolated over objects by the rasterizer Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Fragment Processing Fragments are processed to determine the color of the corresponding pixel in the frame buffer Colors can be determined by texture mapping or interpolation of vertex colors Fragments may be blocked by other fragments closer to the camera Hidden-surface removal Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

The Programmer’s Interface
Programmer sees the graphics system through a software interface: the Application Programmer Interface (API) Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

API Contents Functions that specify what we need to form an image Objects Viewer Light Source(s) Materials Other information Input from devices such as mouse and keyboard Capabilities of system Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Object Specification Most APIs support a limited set of primitives including Points (0D object) Line segments (1D objects) Polygons (2D objects) Some curves and surfaces Quadrics Parametric polynomials All are defined through locations in space or vertices Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Example type of object location of vertex glBegin(GL_POLYGON) glVertex3f(0.0, 0.0, 0.0); glVertex3f(0.0, 1.0, 0.0); glVertex3f(0.0, 0.0, 1.0); glEnd( ); end of object definition Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Camera Specification Six degrees of freedom Position of center of lens Orientation Lens Film size Orientation of film plane Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Lights and Materials Types of lights Point sources vs distributed sources Spot lights Near and far sources Color properties Material properties Absorption: color properties Scattering Diffuse Specular Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Programming with OpenGL Part 1: Background

Objectives Development of the OpenGL API OpenGL Architecture OpenGL as a state machine Functions Types Formats Simple program Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Early History of APIs IFIPS (1973) formed two committees to come up with a standard graphics API Graphical Kernel System (GKS) 2D but contained good workstation model Core Both 2D and 3D GKS adopted as IS0 and later ANSI standard (1980s) GKS not easily extended to 3D (GKS-3D) Far behind hardware development Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

PHIGS and X Programmers Hierarchical Graphics System (PHIGS) Arose from CAD community Database model with retained graphics (structures) X Window System DEC/MIT effort Client-server architecture with graphics PEX combined the two Not easy to use (all the defects of each) Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

SGI and GL Silicon Graphics (SGI) revolutionized the graphics workstation by implementing the pipeline in hardware (1982) To access the system, application programmers used a library called GL With GL, it was relatively simple to program three dimensional interactive applications Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

OpenGL The success of GL lead to OpenGL (1992), a platform-independent API that was Easy to use Close enough to the hardware to get excellent performance Focus on rendering Omitted windowing and input to avoid window system dependencies Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

OpenGL Evolution Originally controlled by an Architectural Review Board (ARB) Members included SGI, Microsoft, Nvidia, HP, 3DLabs, IBM,……. Relatively stable (present version 2.1) Evolution reflects new hardware capabilities 3D texture mapping and texture objects Vertex programs Allows for platform specific features through extensions ARB replaced by Kronos Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

OpenGL Libraries OpenGL core library OpenGL32 on Windows GL on most unix/linux systems (libGL.a) OpenGL Utility Library (GLU) Provides functionality in OpenGL core but avoids having to rewrite code Links with window system GLX for X window systems WGL for Windows AGL for Macintosh Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

GLUT OpenGL Utility Toolkit (GLUT) Provides functionality common to all window systems Open a window Get input from mouse and keyboard Menus Event-driven Code is portable but GLUT lacks the functionality of a good toolkit for a specific platform No slide bars Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Software Organization
application program OpenGL Motif widget or similar GLUT GLX, AGL or WGL GLU GL X, Win32, Mac O/S software and/or hardware Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

OpenGL Architecture geometry pipeline Immediate Mode Per Vertex Operations & Primitive Assembly Polynomial Evaluator Display List Per Fragment Operations Frame Buffer CPU Rasterization Texture Memory Pixel Operations Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

OpenGL Functions Primitives Points Line Segments Polygons Attributes Transformations Viewing Modeling Control (GLUT) Input (GLUT) Query Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

OpenGL State OpenGL is a state machine OpenGL functions are of two types Primitive generating Can cause output if primitive is visible How vertices are processed and appearance of primitive are controlled by the state State changing Transformation functions Attribute functions Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Lack of Object Orientation
OpenGL is not object oriented so that there are multiple functions for a given logical function glVertex3f glVertex2i glVertex3dv Underlying storage mode is the same Easy to create overloaded functions in C++ but issue is efficiency Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

OpenGL function format
function name dimensions glVertex3f(x,y,z) x,y,z are floats belongs to GL library glVertex3fv(p) p is a pointer to an array Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

OpenGL #defines Most constants are defined in the include files gl.h, glu.h and glut.h Note #include <GL/glut.h> should automatically include the others Examples glBegin(GL_POLYGON) glClear(GL_COLOR_BUFFER_BIT) include files also define OpenGL data types: GLfloat, GLdouble,…. Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

A Simple Program Generate a square on a solid background Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

simple.c #include <GL/glut.h> void mydisplay(){ glClear(GL_COLOR_BUFFER_BIT); glBegin(GL_POLYGON); glVertex2f(-0.5, -0.5); glVertex2f(-0.5, 0.5); glVertex2f(0.5, 0.5); glVertex2f(0.5, -0.5); glEnd(); glFlush(); } int main(int argc, char** argv){ glutCreateWindow("simple"); glutDisplayFunc(mydisplay); glutMainLoop(); Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Event Loop Note that the program defines a display callback function named mydisplay Every glut program must have a display callback The display callback is executed whenever OpenGL decides the display must be refreshed, for example when the window is opened The main function ends with the program entering an event loop Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Defaults simple.c is too simple Makes heavy use of state variable default values for Viewing Colors Window parameters Next version will make the defaults more explicit Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Notes on compilation See website and ftp for examples Unix/linux Include files usually in …/include/GL Compile with –lglut –lglu –lgl loader flags May have to add –L flag for X libraries Mesa implementation included with most linux distributions Check web for latest versions of Mesa and glut Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Compilation on Windows
Visual C++ Get glut.h, glut32.lib and glut32.dll from web Create a console application Add opengl32.lib, glut32.lib, glut32.lib to project settings (under link tab) Borland C similar Cygwin (linux under Windows) Can use gcc and similar makefile to linux Use –lopengl32 –lglu32 –lglut32 flags Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Programming with OpenGL Part 2: Complete Programs

Objectives Refine the first program Alter the default values Introduce a standard program structure Simple viewing Two-dimensional viewing as a special case of three-dimensional viewing Fundamental OpenGL primitives Attributes Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Program Structure Most OpenGL programs have a similar structure that consists of the following functions main(): defines the callback functions opens one or more windows with the required properties enters event loop (last executable statement) init(): sets the state variables Viewing Attributes callbacks Display function Input and window functions Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

simple.c revisited In this version, we shall see the same output but we have defined all the relevant state values through function calls using the default values In particular, we set Colors Viewing conditions Window properties Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

main.c includes gl.h #include <GL/glut.h> int main(int argc, char** argv) { glutInit(&argc,argv); glutInitDisplayMode(GLUT_SINGLE|GLUT_RGB); glutInitWindowSize(500,500); glutInitWindowPosition(0,0); glutCreateWindow("simple"); glutDisplayFunc(mydisplay); init(); glutMainLoop(); } define window properties display callback set OpenGL state enter event loop Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

GLUT functions glutInit allows application to get command line arguments and initializes system gluInitDisplayMode requests properties for the window (the rendering context) RGB color Single buffering Properties logically ORed together glutWindowSize in pixels glutWindowPosition from top-left corner of display glutCreateWindow create window with title “simple” glutDisplayFunc display callback glutMainLoop enter infinite event loop Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

init.c void init() { glClearColor (0.0, 0.0, 0.0, 1.0); glColor3f(1.0, 1.0, 1.0); glMatrixMode (GL_PROJECTION); glLoadIdentity (); glOrtho(-1.0, 1.0, -1.0, 1.0, -1.0, 1.0); } black clear color opaque window fill/draw with white viewing volume Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Coordinate Systems The units in glVertex are determined by the application and are called object or problem coordinates The viewing specifications are also in object coordinates and it is the size of the viewing volume that determines what will appear in the image Internally, OpenGL will convert to camera (eye) coordinates and later to screen coordinates OpenGL also uses some internal representations that usually are not visible to the application Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

OpenGL Camera OpenGL places a camera at the origin in object space pointing in the negative z direction The default viewing volume is a box centered at the origin with a side of length 2 Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Orthographic Viewing In the default orthographic view, points are projected forward along the z axis onto the plane z=0 z=0 z=0 Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Transformations and Viewing
In OpenGL, projection is carried out by a projection matrix (transformation) There is only one set of transformation functions so we must set the matrix mode first glMatrixMode (GL_PROJECTION) Transformation functions are incremental so we start with an identity matrix and alter it with a projection matrix that gives the view volume glLoadIdentity(); glOrtho(-1.0, 1.0, -1.0, 1.0, -1.0, 1.0); Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Two- and three-dimensional viewing
In glOrtho(left, right, bottom, top, near, far) the near and far distances are measured from the camera Two-dimensional vertex commands place all vertices in the plane z=0 If the application is in two dimensions, we can use the function gluOrtho2D(left, right,bottom,top) In two dimensions, the view or clipping volume becomes a clipping window Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

mydisplay.c void mydisplay() { glClear(GL_COLOR_BUFFER_BIT); glBegin(GL_POLYGON); glVertex2f(-0.5, -0.5); glVertex2f(-0.5, 0.5); glVertex2f(0.5, 0.5); glVertex2f(0.5, -0.5); glEnd(); glFlush(); } Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

OpenGL Primitives GL_POINTS GL_POLYGON GL_LINE_STRIP GL_LINES GL_LINE_LOOP GL_TRIANGLES GL_QUAD_STRIP GL_TRIANGLE_STRIP GL_TRIANGLE_FAN Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Polygon Issues OpenGL will only display polygons correctly that are Simple: edges cannot cross Convex: All points on line segment between two points in a polygon are also in the polygon Flat: all vertices are in the same plane User program can check if above true OpenGL will produce output if these conditions are violated but it may not be what is desired Triangles satisfy all conditions nonconvex polygon nonsimple polygon Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Attributes Attributes are part of the OpenGL state and determine the appearance of objects Color (points, lines, polygons) Size and width (points, lines) Stipple pattern (lines, polygons) Polygon mode Display as filled: solid color or stipple pattern Display edges Display vertices Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

RGB color Each color component is stored separately in the frame buffer Usually 8 bits per component in buffer Note in glColor3f the color values range from 0.0 (none) to 1.0 (all), whereas in glColor3ub the values range from 0 to 255 Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Indexed Color Colors are indices into tables of RGB values Requires less memory indices usually 8 bits not as important now Memory inexpensive Need more colors for shading Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Color and State The color as set by glColor becomes part of the state and will be used until changed Colors and other attributes are not part of the object but are assigned when the object is rendered We can create conceptual vertex colors by code such as glColor glVertex Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Smooth Color Default is smooth shading OpenGL interpolates vertex colors across visible polygons Alternative is flat shading Color of first vertex determines fill color glShadeModel (GL_SMOOTH) or GL_FLAT Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Viewports Do not have use the entire window for the image: glViewport(x,y,w,h) Values in pixels (screen coordinates) Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Programming with OpenGL Part 3: Three Dimensions

Objectives Develop a more sophisticated three-dimensional example Sierpinski gasket: a fractal Introduce hidden-surface removal Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Three-dimensional Applications
In OpenGL, two-dimensional applications are a special case of three-dimensional graphics Going to 3D Not much changes Use glVertex3*( ) Have to worry about the order in which polygons are drawn or use hidden-surface removal Polygons should be simple, convex, flat Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Sierpinski Gasket (2D) Start with a triangle Connect bisectors of sides and remove central triangle Repeat Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Example Five subdivisions Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

The gasket as a fractal Consider the filled area (black) and the perimeter (the length of all the lines around the filled triangles) As we continue subdividing the area goes to zero but the perimeter goes to infinity This is not an ordinary geometric object It is neither two- nor three-dimensional It is a fractal (fractional dimension) object Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Gasket Program #include <GL/glut.h> /* initial triangle */ GLfloat v[3][2]={{-1.0, -0.58}, {1.0, -0.58}, {0.0, 1.15}}; int n; /* number of recursive steps */ Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Draw one triangle void triangle( GLfloat *a, GLfloat *b, GLfloat *c) /* display one triangle */ { glVertex2fv(a); glVertex2fv(b); glVertex2fv(c); } Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Triangle Subdivision void divide_triangle(GLfloat *a, GLfloat *b, GLfloat *c, int m) { /* triangle subdivision using vertex numbers */ point2 v0, v1, v2; int j; if(m>0) for(j=0; j<2; j++) v0[j]=(a[j]+b[j])/2; for(j=0; j<2; j++) v1[j]=(a[j]+c[j])/2; for(j=0; j<2; j++) v2[j]=(b[j]+c[j])/2; divide_triangle(a, v0, v1, m-1); divide_triangle(c, v1, v2, m-1); divide_triangle(b, v2, v0, m-1); } else(triangle(a,b,c)); /* draw triangle at end of recursion */ Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

display and init Functions
void display() { glClear(GL_COLOR_BUFFER_BIT); glBegin(GL_TRIANGLES); divide_triangle(v[0], v[1], v[2], n); glEnd(); glFlush(); } void myinit() glMatrixMode(GL_PROJECTION); glLoadIdentity(); gluOrtho2D(-2.0, 2.0, -2.0, 2.0); glMatrixMode(GL_MODELVIEW); glClearColor (1.0, 1.0, 1.0,1.0) glColor3f(0.0,0.0,0.0); Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

main Function int main(int argc, char **argv) { n=4; glutInit(&argc, argv); glutInitDisplayMode(GLUT_SINGLE|GLUT_RGB); glutInitWindowSize(500, 500); glutCreateWindow(“2D Gasket"); glutDisplayFunc(display); myinit(); glutMainLoop(); } Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Efficiency Note By having the glBegin and glEnd in the display callback rather than in the function triangle and using GL_TRIANGLES rather than GL_POLYGON in glBegin, we call glBegin and glEnd only once for the entire gasket rather than once for each triangle Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Moving to 3D We can easily make the program three-dimensional by using GLfloat v[3][3] glVertex3f glOrtho But that would not be very interesting Instead, we can start with a tetrahedron Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

3D Gasket We can subdivide each of the four faces Appears as if we remove a solid tetrahedron from the center leaving four smaller tetrahedra Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Example after 5 iterations Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

triangle code void triangle( GLfloat *a, GLfloat *b, GLfloat *c) { glVertex3fv(a); glVertex3fv(b); glVertex3fv(c); } Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

subdivision code void divide_triangle(GLfloat *a, GLfloat *b, GLfloat *c, int m) { GLfloat v1[3], v2[3], v3[3]; int j; if(m>0) for(j=0; j<3; j++) v1[j]=(a[j]+b[j])/2; for(j=0; j<3; j++) v2[j]=(a[j]+c[j])/2; for(j=0; j<3; j++) v3[j]=(b[j]+c[j])/2; divide_triangle(a, v1, v2, m-1); divide_triangle(c, v2, v3, m-1); divide_triangle(b, v3, v1, m-1); } else(triangle(a,b,c)); Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

tetrahedron code void tetrahedron( int m) { glColor3f(1.0,0.0,0.0); divide_triangle(v[0], v[1], v[2], m); glColor3f(0.0,1.0,0.0); divide_triangle(v[3], v[2], v[1], m); glColor3f(0.0,0.0,1.0); divide_triangle(v[0], v[3], v[1], m); glColor3f(0.0,0.0,0.0); divide_triangle(v[0], v[2], v[3], m); } Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Almost Correct Because the triangles are drawn in the order they are defined in the program, the front triangles are not always rendered in front of triangles behind them get this want this Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Hidden-Surface Removal
We want to see only those surfaces in front of other surfaces OpenGL uses a hidden-surface method called the z-buffer algorithm that saves depth information as objects are rendered so that only the front objects appear in the image Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Using the z-buffer algorithm
The algorithm uses an extra buffer, the z-buffer, to store depth information as geometry travels down the pipeline It must be Requested in main.c glutInitDisplayMode (GLUT_SINGLE | GLUT_RGB | GLUT_DEPTH) Enabled in init.c glEnable(GL_DEPTH_TEST) Cleared in the display callback glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT) Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Surface vs Volume Subdvision
In our example, we divided the surface of each face We could also divide the volume using the same midpoints The midpoints define four smaller tetrahedrons, one for each vertex Keeping only these tetrahedrons removes a volume in the middle See text for code Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Volume Subdivision Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Input and Interaction Ed Angel
Professor of Computer Science, Electrical and Computer Engineering, and Media Arts University of New Mexico Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Objectives Introduce the basic input devices Physical Devices Logical Devices Input Modes Event-driven input Introduce double buffering for smooth animations Programming event input with GLUT Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Project Sketchpad Ivan Sutherland (MIT 1963) established the basic interactive paradigm that characterizes interactive computer graphics: User sees an object on the display User points to (picks) the object with an input device (light pen, mouse, trackball) Object changes (moves, rotates, morphs) Repeat Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Graphical Input Devices can be described either by Physical properties Mouse Keyboard Trackball Logical Properties What is returned to program via API A position An object identifier Modes How and when input is obtained Request or event Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Physical Devices mouse trackball light pen data tablet joy stick space ball Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Incremental (Relative) Devices
Devices such as the data tablet return a position directly to the operating system Devices such as the mouse, trackball, and joy stick return incremental inputs (or velocities) to the operating system Must integrate these inputs to obtain an absolute position Rotation of cylinders in mouse Roll of trackball Difficult to obtain absolute position Can get variable sensitivity Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Logical Devices Consider the C and C++ code C++: cin >> x; C: scanf (“%d”, &x); What is the input device? Can’t tell from the code Could be keyboard, file, output from another program The code provides logical input A number (an int) is returned to the program regardless of the physical device Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Graphical Logical Devices
Graphical input is more varied than input to standard programs which is usually numbers, characters, or bits Two older APIs (GKS, PHIGS) defined six types of logical input Locator: return a position Pick: return ID of an object Keyboard: return strings of characters Stroke: return array of positions Valuator: return floating point number Choice: return one of n items Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

X Window Input The X Window System introduced a client-server model for a network of workstations Client: OpenGL program Graphics Server: bitmap display with a pointing device and a keyboard Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Input Modes Input devices contain a trigger which can be used to send a signal to the operating system Button on mouse Pressing or releasing a key When triggered, input devices return information (their measure) to the system Mouse returns position information Keyboard returns ASCII code Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Request Mode Input provided to program only when user triggers the device Typical of keyboard input Can erase (backspace), edit, correct until enter (return) key (the trigger) is depressed Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Event Mode Most systems have more than one input device, each of which can be triggered at an arbitrary time by a user Each trigger generates an event whose measure is put in an event queue which can be examined by the user program Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Event Types Window: resize, expose, iconify Mouse: click one or more buttons Motion: move mouse Keyboard: press or release a key Idle: nonevent Define what should be done if no other event is in queue Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Callbacks Programming interface for event-driven input Define a callback function for each type of event the graphics system recognizes This user-supplied function is executed when the event occurs GLUT example: glutMouseFunc(mymouse) mouse callback function Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

GLUT callbacks GLUT recognizes a subset of the events recognized by any particular window system (Windows, X, Macintosh) glutDisplayFunc glutMouseFunc glutReshapeFunc glutKeyboardFunc glutIdleFunc glutMotionFunc, glutPassiveMotionFunc Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

GLUT Event Loop Recall that the last line in main.c for a program using GLUT must be glutMainLoop(); which puts the program in an infinite event loop In each pass through the event loop, GLUT looks at the events in the queue for each event in the queue, GLUT executes the appropriate callback function if one is defined if no callback is defined for the event, the event is ignored Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

The display callback The display callback is executed whenever GLUT determines that the window should be refreshed, for example When the window is first opened When the window is reshaped When a window is exposed When the user program decides it wants to change the display In main.c glutDisplayFunc(mydisplay) identifies the function to be executed Every GLUT program must have a display callback Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Posting redisplays Many events may invoke the display callback function Can lead to multiple executions of the display callback on a single pass through the event loop We can avoid this problem by instead using glutPostRedisplay(); which sets a flag. GLUT checks to see if the flag is set at the end of the event loop If set then the display callback function is executed Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Animating a Display When we redraw the display through the display callback, we usually start by clearing the window glClear() then draw the altered display Problem: the drawing of information in the frame buffer is decoupled from the display of its contents Graphics systems use dual ported memory Hence we can see partially drawn display See the program single_double.c for an example with a rotating cube Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Double Buffering Instead of one color buffer, we use two Front Buffer: one that is displayed but not written to Back Buffer: one that is written to but not displayed Program then requests a double buffer in main.c glutInitDisplayMode(GL_RGB | GL_DOUBLE) At the end of the display callback buffers are swapped void mydisplay() { glClear(GL_COLOR_BUFFER_BIT|….) . /* draw graphics here */ glutSwapBuffers() } Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Using the idle callback
The idle callback is executed whenever there are no events in the event queue glutIdleFunc(myidle) Useful for animations void myidle() { /* change something */ t += dt glutPostRedisplay(); } Void mydisplay() { glClear(); /* draw something that depends on t */ glutSwapBuffers(); Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Using globals The form of all GLUT callbacks is fixed void mydisplay() void mymouse(GLint button, GLint state, GLint x, GLint y) Must use globals to pass information to callbacks float t; /*global */ void mydisplay() { /* draw something that depends on t } Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Working with Callbacks

Objectives Learn to build interactive programs using GLUT callbacks Mouse Keyboard Reshape Introduce menus in GLUT Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

The mouse callback glutMouseFunc(mymouse) void mymouse(GLint button, GLint state, GLint x, GLint y) Returns which button (GLUT_LEFT_BUTTON, GLUT_MIDDLE_BUTTON, GLUT_RIGHT_BUTTON) caused event state of that button (GLUT_UP, GLUT_DOWN) Position in window Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Positioning The position in the screen window is usually measured in pixels with the origin at the top-left corner Consequence of refresh done from top to bottom OpenGL uses a world coordinate system with origin at the bottom left Must invert y coordinate returned by callback by height of window y = h – y; (0,0) h w Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Obtaining the window size
To invert the y position we need the window height Height can change during program execution Track with a global variable New height returned to reshape callback that we will look at in detail soon Can also use query functions glGetIntv glGetFloatv to obtain any value that is part of the state Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Terminating a program In our original programs, there was no way to terminate them through OpenGL We can use the simple mouse callback void mouse(int btn, int state, int x, int y) { if(btn==GLUT_RIGHT_BUTTON && state==GLUT_DOWN) exit(0); } Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Using the mouse position
In the next example, we draw a small square at the location of the mouse each time the left mouse button is clicked This example does not use the display callback but one is required by GLUT; We can use the empty display callback function mydisplay(){} Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Drawing squares at cursor location
void mymouse(int btn, int state, int x, int y) { if(btn==GLUT_RIGHT_BUTTON && state==GLUT_DOWN) exit(0); if(btn==GLUT_LEFT_BUTTON && state==GLUT_DOWN) drawSquare(x, y); } void drawSquare(int x, int y) y=w-y; /* invert y position */ glColor3ub( (char) rand()%256, (char) rand )%256, (char) rand()%256); /* a random color */ glBegin(GL_POLYGON); glVertex2f(x+size, y+size); glVertex2f(x-size, y+size); glVertex2f(x-size, y-size); glVertex2f(x+size, y-size); glEnd(); Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Using the motion callback
We can draw squares (or anything else) continuously as long as a mouse button is depressed by using the motion callback glutMotionFunc(drawSquare) We can draw squares without depressing a button using the passive motion callback glutPassiveMotionFunc(drawSquare) Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Using the keyboard glutKeyboardFunc(mykey) void mykey(unsigned char key, int x, int y) Returns ASCII code of key depressed and mouse location void mykey() { if(key == ‘Q’ | key == ‘q’) exit(0); } Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Special and Modifier Keys
GLUT defines the special keys in glut.h Function key 1: GLUT_KEY_F1 Up arrow key: GLUT_KEY_UP if(key == ‘GLUT_KEY_F1’ …… Can also check of one of the modifiers GLUT_ACTIVE_SHIFT GLUT_ACTIVE_CTRL GLUT_ACTIVE_ALT is depressed by glutGetModifiers() Allows emulation of three-button mouse with one- or two-button mice Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Reshaping the window We can reshape and resize the OpenGL display window by pulling the corner of the window What happens to the display? Must redraw from application Two possibilities Display part of world Display whole world but force to fit in new window Can alter aspect ratio Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Reshape possiblities original reshaped Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

The Reshape callback glutReshapeFunc(myreshape) void myreshape( int w, int h) Returns width and height of new window (in pixels) A redisplay is posted automatically at end of execution of the callback GLUT has a default reshape callback but you probably want to define your own The reshape callback is good place to put viewing functions because it is invoked when the window is first opened Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Example Reshape This reshape preserves shapes by making the viewport and world window have the same aspect ratio void myReshape(int w, int h) { glViewport(0, 0, w, h); glMatrixMode(GL_PROJECTION); /* switch matrix mode */ glLoadIdentity(); if (w <= h) gluOrtho2D(-2.0, 2.0, -2.0 * (GLfloat) h / (GLfloat) w, 2.0 * (GLfloat) h / (GLfloat) w); else gluOrtho2D(-2.0 * (GLfloat) w / (GLfloat) h, 2.0 * (GLfloat) w / (GLfloat) h, -2.0, 2.0); glMatrixMode(GL_MODELVIEW); /* return to modelview mode */ } Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Toolkits and Widgets Most window systems provide a toolkit or library of functions for building user interfaces that use special types of windows called widgets Widget sets include tools such as Menus Slidebars Dials Input boxes But toolkits tend to be platform dependent GLUT provides a few widgets including menus Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Menus GLUT supports pop-up menus A menu can have submenus Three steps Define entries for the menu Define action for each menu item Action carried out if entry selected Attach menu to a mouse button Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Defining a simple menu In main.c menu_id = glutCreateMenu(mymenu); glutAddmenuEntry(“clear Screen”, 1); gluAddMenuEntry(“exit”, 2); glutAttachMenu(GLUT_RIGHT_BUTTON); clear screen exit entries that appear when right button depressed identifiers Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Menu actions Menu callback Note each menu has an id that is returned when it is created Add submenus by glutAddSubMenu(char *submenu_name, submenu id) void mymenu(int id) { if(id == 1) glClear(); if(id == 2) exit(0); } entry in parent menu Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Other functions in GLUT
Dynamic Windows Create and destroy during execution Subwindows Multiple Windows Changing callbacks during execution Timers Portable fonts glutBitmapCharacter glutStrokeCharacter Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Better Interactive Programs

Objectives Learn to build more sophisticated interactive programs using Picking Select objects from the display Three methods Rubberbanding Interactive drawing of lines and rectangles Display Lists Retained mode graphics Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Picking Identify a user-defined object on the display In principle, it should be simple because the mouse gives the position and we should be able to determine to which object(s) a position corresponds Practical difficulties Pipeline architecture is feed forward, hard to go from screen back to world Complicated by screen being 2D, world is 3D How close do we have to come to object to say we selected it? Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Three Approaches Hit list Most general approach but most difficult to implement Use back or some other buffer to store object ids as the objects are rendered Rectangular maps Easy to implement for many applications See paint program in text Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Rendering Modes OpenGL can render in one of three modes selected by glRenderMode(mode) GL_RENDER: normal rendering to the frame buffer (default) GL_FEEDBACK: provides list of primitives rendered but no output to the frame buffer GL_SELECTION: Each primitive in the view volume generates a hit record that is placed in a name stack which can be examined later Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Selection Mode Functions
glSelectBuffer(): specifies name buffer glInitNames(): initializes name buffer glPushName(id): push id on name buffer glPopName(): pop top of name buffer glLoadName(id): replace top name on buffer id is set by application program to identify objects Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Using Selection Mode Initialize name buffer Enter selection mode (using mouse) Render scene with user-defined identifiers Reenter normal render mode This operation returns number of hits Examine contents of name buffer (hit records) Hit records include id and depth information Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Selection Mode and Picking
As we just described it, selection mode won’t work for picking because every primitive in the view volume will generate a hit Change the viewing parameters so that only those primitives near the cursor are in the altered view volume Use gluPickMatrix (see text for details) Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Using Regions of the Screen
Many applications use a simple rectangular arrangement of the screen Example: paint/CAD program Easier to look at mouse position and determine which area of screen it is in than using selection mode picking tools menus drawing area Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Using another buffer and colors for picking
For a small number of objects, we can assign a unique color (often in color index mode) to each object We then render the scene to a color buffer other than the front buffer so the results of the rendering are not visible We then get the mouse position and use glReadPixels() to read the color in the buffer we just wrote at the position of the mouse The returned color gives the id of the object Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Writing Modes bitwise logical operation application ‘ frame buffer Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

XOR write Usual (default) mode: source replaces destination (d’ = s) Cannot write temporary lines this way because we cannot recover what was “under” the line in a fast simple way Exclusive OR mode (XOR) (d’ = d  s) x  y  x =y Hence, if we use XOR mode to write a line, we can draw it a second time and line is erased! Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Rubberbanding Switch to XOR write mode Draw object For line can use first mouse click to fix one endpoint and then use motion callback to continuously update the second endpoint Each time mouse is moved, redraw line which erases it and then draw line from fixed first position to to new second position At end, switch back to normal drawing mode and draw line Works for other objects: rectangles, circles Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Rubberband Lines second point first point draw line with mouse in XOR mode initial display new line drawn with XOR mouse moved to new position original line redrawn with XOR Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

XOR in OpenGL There are 16 possible logical operations between two bits All are supported by OpenGL Must first enable logical operations glEnable(GL_COLOR_LOGIC_OP) Choose logical operation glLogicOp(GL_XOR) glLogicOp(GL_COPY) (default) Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Immediate and Retained Modes
Recall that in a standard OpenGL program, once an object is rendered there is no memory of it and to redisplay it, we must re-execute the code for it Known as immediate mode graphics Can be especially slow if the objects are complex and must be sent over a network Alternative is define objects and keep them in some form that can be redisplayed easily Retained mode graphics Accomplished in OpenGL via display lists Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Display Lists Conceptually similar to a graphics file Must define (name, create) Add contents Close In client-server environment, display list is placed on server Can be redisplayed without sending primitives over network each time Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Display List Functions
Creating a display list GLuint id; void init() { id = glGenLists( 1 ); glNewList( id, GL_COMPILE ); /* other OpenGL routines */ glEndList(); } Call a created list void display() glCallList( id ); Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Display Lists and State
Most OpenGL functions can be put in display lists State changes made inside a display list persist after the display list is executed Can avoid unexpected results by using glPushAttrib and glPushMatrix upon entering a display list and glPopAttrib and glPopMatrix before exiting Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Hierarchy and Display Lists
Consider model of a car Create display list for chassis Create display list for wheel glNewList( CAR, GL_COMPILE ); glCallList( CHASSIS ); glTranslatef( … ); glCallList( WHEEL ); … glEndList(); Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Geometry Ed Angel Professor of Computer Science, Electrical and Computer Engineering, and Media Arts University of New Mexico Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Objectives Introduce the elements of geometry Scalars Vectors Points Develop mathematical operations among them in a coordinate-free manner Define basic primitives Line segments Polygons Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Basic Elements Geometry is the study of the relationships among objects in an n-dimensional space In computer graphics, we are interested in objects that exist in three dimensions Want a minimum set of primitives from which we can build more sophisticated objects We will need three basic elements Scalars Vectors Points Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Coordinate-Free Geometry
When we learned simple geometry, most of us started with a Cartesian approach Points were at locations in space p=(x,y,z) We derived results by algebraic manipulations involving these coordinates This approach was nonphysical Physically, points exist regardless of the location of an arbitrary coordinate system Most geometric results are independent of the coordinate system Example Euclidean geometry: two triangles are identical if two corresponding sides and the angle between them are identical Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Scalars Need three basic elements in geometry Scalars, Vectors, Points Scalars can be defined as members of sets which can be combined by two operations (addition and multiplication) obeying some fundamental axioms (associativity, commutivity, inverses) Examples include the real and complex number systems under the ordinary rules with which we are familiar Scalars alone have no geometric properties Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Vectors Physical definition: a vector is a quantity with two attributes Direction Magnitude Examples include Force Velocity Directed line segments Most important example for graphics Can map to other types v Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Vector Operations Every vector has an inverse Same magnitude but points in opposite direction Every vector can be multiplied by a scalar There is a zero vector Zero magnitude, undefined orientation The sum of any two vectors is a vector Use head-to-tail axiom v w v v -v u Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Linear Vector Spaces Mathematical system for manipulating vectors Operations Scalar-vector multiplication u=v Vector-vector addition: w=u+v Expressions such as v=u+2w-3r Make sense in a vector space Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Vectors Lack Position These vectors are identical Same length and magnitude Vectors spaces insufficient for geometry Need points Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Points Location in space Operations allowed between points and vectors Point-point subtraction yields a vector Equivalent to point-vector addition v=P-Q P=v+Q Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Affine Spaces Point + a vector space Operations Vector-vector addition Scalar-vector multiplication Point-vector addition Scalar-scalar operations For any point define 1 • P = P 0 • P = 0 (zero vector) Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Lines Consider all points of the form P(a)=P0 + a d Set of all points that pass through P0 in the direction of the vector d Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Parametric Form This form is known as the parametric form of the line More robust and general than other forms Extends to curves and surfaces Two-dimensional forms Explicit: y = mx +h Implicit: ax + by +c =0 Parametric: x(a) = ax0 + (1-a)x1 y(a) = ay0 + (1-a)y1 Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Rays and Line Segments If a >= 0, then P(a) is the ray leaving P0 in the direction d If we use two points to define v, then P( a) = Q + a (R-Q)=Q+av =aR + (1-a)Q For 0<=a<=1 we get all the points on the line segment joining R and Q Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Convexity An object is convex iff for any two points in the object all points on the line segment between these points are also in the object P P Q Q not convex convex Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Affine Sums Consider the “sum” P=a1P1+a2P2+…..+anPn Can show by induction that this sum makes sense iff a1+a2+…..an=1 in which case we have the affine sum of the points P1,P2,…..Pn If, in addition, ai>=0, we have the convex hull of P1,P2,…..Pn Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Convex Hull Smallest convex object containing P1,P2,…..Pn Formed by “shrink wrapping” points Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Curves and Surfaces Curves are one parameter entities of the form P(a) where the function is nonlinear Surfaces are formed from two-parameter functions P(a, b) Linear functions give planes and polygons P(a) P(a, b) Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Planes A plane can be defined by a point and two vectors or by three points P v Q R R u P(a,b)=R+a(Q-R)+b(P-Q) P(a,b)=R+au+bv Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Triangles convex sum of S(a) and R convex sum of P and Q for 0<=a,b<=1, we get all points in triangle Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Normals Every plane has a vector n normal (perpendicular, orthogonal) to it From point-two vector form P(a,b)=R+au+bv, we know we can use the cross product to find n = u  v and the equivalent form (P(a)-P)  n=0 v u P Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Representation Ed Angel

Objectives Introduce concepts such as dimension and basis Introduce coordinate systems for representing vectors spaces and frames for representing affine spaces Discuss change of frames and bases Introduce homogeneous coordinates Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Linear Independence A set of vectors v1, v2, …, vn is linearly independent if a1v1+a2v2+.. anvn=0 iff a1=a2=…=0 If a set of vectors is linearly independent, we cannot represent one in terms of the others If a set of vectors is linearly dependent, as least one can be written in terms of the others Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Dimension In a vector space, the maximum number of linearly independent vectors is fixed and is called the dimension of the space In an n-dimensional space, any set of n linearly independent vectors form a basis for the space Given a basis v1, v2,…., vn, any vector v can be written as v=a1v1+ a2v2 +….+anvn where the {ai} are unique Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Representation Until now we have been able to work with geometric entities without using any frame of reference, such as a coordinate system Need a frame of reference to relate points and objects to our physical world. For example, where is a point? Can’t answer without a reference system World coordinates Camera coordinates Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Coordinate Systems Consider a basis v1, v2,…., vn A vector is written v=a1v1+ a2v2 +….+anvn The list of scalars {a1, a2, …. an}is the representation of v with respect to the given basis We can write the representation as a row or column array of scalars a=[a1 a2 …. an]T= Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Example v=2v1+3v2-4v3 a=[2 3 –4]T Note that this representation is with respect to a particular basis For example, in OpenGL we start by representing vectors using the object basis but later the system needs a representation in terms of the camera or eye basis Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Coordinate Systems Which is correct? Both are because vectors have no fixed location v v Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Frames A coordinate system is insufficient to represent points If we work in an affine space we can add a single point, the origin, to the basis vectors to form a frame v2 v1 P0 v3 Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Representation in a Frame
Frame determined by (P0, v1, v2, v3) Within this frame, every vector can be written as v=a1v1+ a2v2 +….+anvn Every point can be written as P = P0 + b1v1+ b2v2 +….+bnvn Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Confusing Points and Vectors
Consider the point and the vector P = P0 + b1v1+ b2v2 +….+bnvn v=a1v1+ a2v2 +….+anvn They appear to have the similar representations p=[b1 b2 b3] v=[a1 a2 a3] which confuses the point with the vector A vector has no position v p v Vector can be placed anywhere point: fixed Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

A Single Representation
If we define 0•P = 0 and 1•P =P then we can write v=a1v1+ a2v2 +a3v3 = [a1 a2 a3 0 ] [v1 v2 v3 P0] T P = P0 + b1v1+ b2v2 +b3v3= [b1 b2 b3 1 ] [v1 v2 v3 P0] T Thus we obtain the four-dimensional homogeneous coordinate representation v = [a1 a2 a3 0 ] T p = [b1 b2 b3 1 ] T Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Homogeneous Coordinates
The homogeneous coordinates form for a three dimensional point [x y z] is given as p =[x’ y’ z’ w] T =[wx wy wz w] T We return to a three dimensional point (for w0) by xx’/w yy’/w zz’/w If w=0, the representation is that of a vector Note that homogeneous coordinates replaces points in three dimensions by lines through the origin in four dimensions For w=1, the representation of a point is [x y z 1] Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Homogeneous Coordinates and Computer Graphics
Homogeneous coordinates are key to all computer graphics systems All standard transformations (rotation, translation, scaling) can be implemented with matrix multiplications using 4 x 4 matrices Hardware pipeline works with 4 dimensional representations For orthographic viewing, we can maintain w=0 for vectors and w=1 for points For perspective we need a perspective division Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Change of Coordinate Systems
Consider two representations of a the same vector with respect to two different bases. The representations are a=[a1 a2 a3 ] b=[b1 b2 b3] where v=a1v1+ a2v2 +a3v3 = [a1 a2 a3] [v1 v2 v3] T =b1u1+ b2u2 +b3u3 = [b1 b2 b3] [u1 u2 u3] T Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Representing second basis in terms of first
Each of the basis vectors, u1,u2, u3, are vectors that can be represented in terms of the first basis v u1 = g11v1+g12v2+g13v3 u2 = g21v1+g22v2+g23v3 u3 = g31v1+g32v2+g33v3 Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Matrix Form The coefficients define a 3 x 3 matrix and the bases can be related by see text for numerical examples M = a=MTb Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Change of Frames We can apply a similar process in homogeneous coordinates to the representations of both points and vectors Any point or vector can be represented in either frame We can represent Q0, u1, u2, u3 in terms of P0, v1, v2, v3 u2 u1 v2 Consider two frames: (P0, v1, v2, v3) (Q0, u1, u2, u3) Q0 P0 v1 u3 v3 Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Representing One Frame in Terms of the Other
Extending what we did with change of bases u1 = g11v1+g12v2+g13v3 u2 = g21v1+g22v2+g23v3 u3 = g31v1+g32v2+g33v3 Q0 = g41v1+g42v2+g43v3 +g44P0 defining a 4 x 4 matrix M = Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Working with Representations
Within the two frames any point or vector has a representation of the same form a=[a1 a2 a3 a4 ] in the first frame b=[b1 b2 b3 b4 ] in the second frame where a4 = b4 = 1 for points and a4 = b4 = 0 for vectors and The matrix M is 4 x 4 and specifies an affine transformation in homogeneous coordinates a=MTb Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Affine Transformations
Every linear transformation is equivalent to a change in frames Every affine transformation preserves lines However, an affine transformation has only 12 degrees of freedom because 4 of the elements in the matrix are fixed and are a subset of all possible 4 x 4 linear transformations Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

The World and Camera Frames
When we work with representations, we work with n-tuples or arrays of scalars Changes in frame are then defined by 4 x 4 matrices In OpenGL, the base frame that we start with is the world frame Eventually we represent entities in the camera frame by changing the world representation using the model-view matrix Initially these frames are the same (M=I) Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Moving the Camera If objects are on both sides of z=0, we must move camera frame M = Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Transformations Ed Angel

Objectives Introduce standard transformations Rotation Translation Scaling Shear Derive homogeneous coordinate transformation matrices Learn to build arbitrary transformation matrices from simple transformations Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

General Transformations
A transformation maps points to other points and/or vectors to other vectors v=T(u) Q=T(P) Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Affine Transformations
Line preserving Characteristic of many physically important transformations Rigid body transformations: rotation, translation Scaling, shear Importance in graphics is that we need only transform endpoints of line segments and let implementation draw line segment between the transformed endpoints Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Pipeline Implementation
(from application program) frame buffer u T(u) transformation rasterizer v T(v) T(v) T(v) v T(u) u T(u) vertices vertices pixels Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Notation We will be working with both coordinate-free representations of transformations and representations within a particular frame P,Q, R: points in an affine space u, v, w: vectors in an affine space a, b, g: scalars p, q, r: representations of points -array of 4 scalars in homogeneous coordinates u, v, w: representations of points Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Translation Move (translate, displace) a point to a new location Displacement determined by a vector d Three degrees of freedom P’=P+d P’ d P Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

How many ways? Although we can move a point to a new location in infinite ways, when we move many points there is usually only one way object translation: every point displaced by same vector Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Translation Using Representations
Using the homogeneous coordinate representation in some frame p=[ x y z 1]T p’=[x’ y’ z’ 1]T d=[dx dy dz 0]T Hence p’ = p + d or x’=x+dx y’=y+dy z’=z+dz note that this expression is in four dimensions and expresses point = vector + point Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Translation Matrix We can also express translation using a 4 x 4 matrix T in homogeneous coordinates p’=Tp where T = T(dx, dy, dz) = This form is better for implementation because all affine transformations can be expressed this way and multiple transformations can be concatenated together Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Rotation (2D) Consider rotation about the origin by q degrees radius stays the same, angle increases by q x = r cos (f + q) y = r sin (f + q) x’=x cos q –y sin q y’ = x sin q + y cos q x = r cos f y = r sin f Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Rotation about the z axis
Rotation about z axis in three dimensions leaves all points with the same z Equivalent to rotation in two dimensions in planes of constant z or in homogeneous coordinates p’=Rz(q)p x’=x cos q –y sin q y’ = x sin q + y cos q z’ =z Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Rotation Matrix R = Rz(q) = Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Rotation about x and y axes
Same argument as for rotation about z axis For rotation about x axis, x is unchanged For rotation about y axis, y is unchanged R = Rx(q) = R = Ry(q) = Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Scaling Expand or contract along each axis (fixed point of origin) x’=sxx y’=syx z’=szx p’=Sp S = S(sx, sy, sz) = Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Reflection corresponds to negative scale factors sx = -1 sy = 1 original sx = -1 sy = -1 sx = 1 sy = -1 Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Inverses Although we could compute inverse matrices by general formulas, we can use simple geometric observations Translation: T-1(dx, dy, dz) = T(-dx, -dy, -dz) Rotation: R -1(q) = R(-q) Holds for any rotation matrix Note that since cos(-q) = cos(q) and sin(-q)=-sin(q) R -1(q) = R T(q) Scaling: S-1(sx, sy, sz) = S(1/sx, 1/sy, 1/sz) Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Concatenation We can form arbitrary affine transformation matrices by multiplying together rotation, translation, and scaling matrices Because the same transformation is applied to many vertices, the cost of forming a matrix M=ABCD is not significant compared to the cost of computing Mp for many vertices p The difficult part is how to form a desired transformation from the specifications in the application Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Order of Transformations
Note that matrix on the right is the first applied Mathematically, the following are equivalent p’ = ABCp = A(B(Cp)) Note many references use column matrices to represent points. In terms of column matrices p’T = pTCTBTAT Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

General Rotation About the Origin
A rotation by q about an arbitrary axis can be decomposed into the concatenation of rotations about the x, y, and z axes R(q) = Rz(qz) Ry(qy) Rx(qx) y v q qx qy qz are called the Euler angles Note that rotations do not commute We can use rotations in another order but with different angles x z Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Rotation About a Fixed Point other than the Origin
Move fixed point to origin Rotate Move fixed point back M = T(pf) R(q) T(-pf) Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Instancing In modeling, we often start with a simple object centered at the origin, oriented with the axis, and at a standard size We apply an instance transformation to its vertices to Scale Orient Locate Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Shear Helpful to add one more basic transformation Equivalent to pulling faces in opposite directions Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Shear Matrix Consider simple shear along x axis x’ = x + y cot q y’ = y z’ = z H(q) = Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

OpenGL Transformations

Objectives Learn how to carry out transformations in OpenGL Rotation Translation Scaling Introduce OpenGL matrix modes Model-view Projection Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

OpenGL Matrices In OpenGL matrices are part of the state Multiple types Model-View (GL_MODELVIEW) Projection (GL_PROJECTION) Texture (GL_TEXTURE) (ignore for now) Color(GL_COLOR) (ignore for now) Single set of functions for manipulation Select which to manipulated by glMatrixMode(GL_MODELVIEW); glMatrixMode(GL_PROJECTION); Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Current Transformation Matrix (CTM)
Conceptually there is a 4 x 4 homogeneous coordinate matrix, the current transformation matrix (CTM) that is part of the state and is applied to all vertices that pass down the pipeline The CTM is defined in the user program and loaded into a transformation unit C p’=Cp p vertices CTM vertices Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

CTM operations The CTM can be altered either by loading a new CTM or by postmutiplication Load an identity matrix: C  I Load an arbitrary matrix: C  M Load a translation matrix: C  T Load a rotation matrix: C  R Load a scaling matrix: C  S Postmultiply by an arbitrary matrix: C  CM Postmultiply by a translation matrix: C  CT Postmultiply by a rotation matrix: C  C R Postmultiply by a scaling matrix: C  C S Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Rotation about a Fixed Point
Start with identity matrix: C  I Move fixed point to origin: C  CT Rotate: C  CR Move fixed point back: C  CT -1 Result: C = TR T –1 which is backwards. This result is a consequence of doing postmultiplications. Let’s try again. Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Reversing the Order We want C = T –1 R T so we must do the operations in the following order C  I C  CT -1 C  CR C  CT Each operation corresponds to one function call in the program. Note that the last operation specified is the first executed in the program Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

CTM in OpenGL OpenGL has a model-view and a projection matrix in the pipeline which are concatenated together to form the CTM Can manipulate each by first setting the correct matrix mode Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Rotation, Translation, Scaling
Load an identity matrix: glLoadIdentity() Multiply on right: glRotatef(theta, vx, vy, vz) theta in degrees, (vx, vy, vz) define axis of rotation glTranslatef(dx, dy, dz) glScalef( sx, sy, sz) Each has a float (f) and double (d) format (glScaled) Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Example Rotation about z axis by 30 degrees with a fixed point of (1.0, 2.0, 3.0) Remember that last matrix specified in the program is the first applied glMatrixMode(GL_MODELVIEW); glLoadIdentity(); glTranslatef(1.0, 2.0, 3.0); glRotatef(30.0, 0.0, 0.0, 1.0); glTranslatef(-1.0, -2.0, -3.0); Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Arbitrary Matrices Can load and multiply by matrices defined in the application program The matrix m is a one dimension array of 16 elements which are the components of the desired 4 x 4 matrix stored by columns In glMultMatrixf, m multiplies the existing matrix on the right glLoadMatrixf(m) glMultMatrixf(m) Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Matrix Stacks In many situations we want to save transformation matrices for use later Traversing hierarchical data structures (Chapter 10) Avoiding state changes when executing display lists OpenGL maintains stacks for each type of matrix Access present type (as set by glMatrixMode) by glPushMatrix() glPopMatrix() Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Reading Back Matrices Can also access matrices (and other parts of the state) by query functions For matrices, we use as glGetIntegerv glGetFloatv glGetBooleanv glGetDoublev glIsEnabled double m[16]; glGetFloatv(GL_MODELVIEW, m); Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Using Transformations
Example: use idle function to rotate a cube and mouse function to change direction of rotation Start with a program that draws a cube (colorcube.c) in a standard way Centered at origin Sides aligned with axes Will discuss modeling in next lecture Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

main.c void main(int argc, char **argv) { glutInit(&argc, argv); glutInitDisplayMode(GLUT_DOUBLE | GLUT_RGB | GLUT_DEPTH); glutInitWindowSize(500, 500); glutCreateWindow("colorcube"); glutReshapeFunc(myReshape); glutDisplayFunc(display); glutIdleFunc(spinCube); glutMouseFunc(mouse); glEnable(GL_DEPTH_TEST); glutMainLoop(); } Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Idle and Mouse callbacks
void spinCube() { theta[axis] += 2.0; if( theta[axis] > ) theta[axis] -= 360.0; glutPostRedisplay(); } void mouse(int btn, int state, int x, int y) { if(btn==GLUT_LEFT_BUTTON && state == GLUT_DOWN) axis = 0; if(btn==GLUT_MIDDLE_BUTTON && state == GLUT_DOWN) axis = 1; if(btn==GLUT_RIGHT_BUTTON && state == GLUT_DOWN) axis = 2; } Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Display callback void display() { glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT); glLoadIdentity(); glRotatef(theta[0], 1.0, 0.0, 0.0); glRotatef(theta[1], 0.0, 1.0, 0.0); glRotatef(theta[2], 0.0, 0.0, 1.0); colorcube(); glutSwapBuffers(); } Note that because of fixed from of callbacks, variables such as theta and axis must be defined as globals Camera information is in standard reshape callback Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Using the Model-view Matrix
In OpenGL the model-view matrix is used to Position the camera Can be done by rotations and translations but is often easier to use gluLookAt Build models of objects The projection matrix is used to define the view volume and to select a camera lens Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Model-view and Projection Matrices
Although both are manipulated by the same functions, we have to be careful because incremental changes are always made by postmultiplication For example, rotating model-view and projection matrices by the same matrix are not equivalent operations. Postmultiplication of the model-view matrix is equivalent to premultiplication of the projection matrix Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Smooth Rotation From a practical standpoint, we are often want to use transformations to move and reorient an object smoothly Problem: find a sequence of model-view matrices M0,M1,…..,Mn so that when they are applied successively to one or more objects we see a smooth transition For orientating an object, we can use the fact that every rotation corresponds to part of a great circle on a sphere Find the axis of rotation and angle Virtual trackball (see text) Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Incremental Rotation Consider the two approaches For a sequence of rotation matrices R0,R1,…..,Rn , find the Euler angles for each and use Ri= Riz Riy Rix Not very efficient Use the final positions to determine the axis and angle of rotation, then increment only the angle Quaternions can be more efficient than either Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Quaternions Extension of imaginary numbers from two to three dimensions Requires one real and three imaginary components i, j, k Quaternions can express rotations on sphere smoothly and efficiently. Process: Model-view matrix  quaternion Carry out operations with quaternions Quaternion  Model-view matrix q=q0+q1i+q2j+q3k Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Interfaces One of the major problems in interactive computer graphics is how to use two-dimensional devices such as a mouse to interface with three dimensional obejcts Example: how to form an instance matrix? Some alternatives Virtual trackball 3D input devices such as the spaceball Use areas of the screen Distance from center controls angle, position, scale depending on mouse button depressed Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Building Models Ed Angel

Objectives Introduce simple data structures for building polygonal models Vertex lists Edge lists OpenGL vertex arrays Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Representing a Mesh Consider a mesh There are 8 nodes and 12 edges 5 interior polygons 6 interior (shared) edges Each vertex has a location vi = (xi yi zi) e2 v5 v6 e3 e9 e8 v8 v4 e1 e11 e10 v7 e4 e7 v1 e12 v2 v3 e6 e5 Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Simple Representation
Define each polygon by the geometric locations of its vertices Leads to OpenGL code such as Inefficient and unstructured Consider moving a vertex to a new location Must search for all occurrences glBegin(GL_POLYGON); glVertex3f(x1, x1, x1); glVertex3f(x6, x6, x6); glVertex3f(x7, x7, x7); glEnd(); Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Inward and Outward Facing Polygons
The order {v1, v6, v7} and {v6, v7, v1} are equivalent in that the same polygon will be rendered by OpenGL but the order {v1, v7, v6} is different The first two describe outwardly facing polygons Use the right-hand rule = counter-clockwise encirclement of outward-pointing normal OpenGL can treat inward and outward facing polygons differently Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Geometry vs Topology Generally it is a good idea to look for data structures that separate the geometry from the topology Geometry: locations of the vertices Topology: organization of the vertices and edges Example: a polygon is an ordered list of vertices with an edge connecting successive pairs of vertices and the last to the first Topology holds even if geometry changes Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Vertex Lists Put the geometry in an array Use pointers from the vertices into this array Introduce a polygon list x1 y1 z1 x2 y2 z2 x3 y3 z3 x4 y4 z4 x5 y5 z5. x6 y6 z6 x7 y7 z7 x8 y8 z8 v1 v7 v6 P1 P2 P3 P4 P5 v8 v5 v6 topology geometry Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Shared Edges Vertex lists will draw filled polygons correctly but if we draw the polygon by its edges, shared edges are drawn twice Can store mesh by edge list Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Edge List v1 v2 v7 v6 v8 v5 v3 e1 e8 e3 e2 e11 e6 e7 e10 e5 e4 e9 e12 x1 y1 z1 x2 y2 z2 x3 y3 z3 x4 y4 z4 x5 y5 z5. x6 y6 z6 x7 y7 z7 x8 y8 z8 e1 e2 e3 e4 e5 e6 e7 e8 e9 v1 v6 Note polygons are not represented Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Modeling a Cube Model a color cube for rotating cube program Define global arrays for vertices and colors GLfloat vertices[][3] = {{-1.0,-1.0,-1.0},{1.0,-1.0,-1.0}, {1.0,1.0,-1.0}, {-1.0,1.0,-1.0}, {-1.0,-1.0,1.0}, {1.0,-1.0,1.0}, {1.0,1.0,1.0}, {-1.0,1.0,1.0}}; GLfloat colors[][3] = {{0.0,0.0,0.0},{1.0,0.0,0.0}, {1.0,1.0,0.0}, {0.0,1.0,0.0}, {0.0,0.0,1.0}, {1.0,0.0,1.0}, {1.0,1.0,1.0}, {0.0,1.0,1.0}}; Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Drawing a polygon from a list of indices
Draw a quadrilateral from a list of indices into the array vertices and use color corresponding to first index void polygon(int a, int b, int c , int d) { glBegin(GL_POLYGON); glColor3fv(colors[a]); glVertex3fv(vertices[a]); glVertex3fv(vertices[b]); glVertex3fv(vertices[c]); glVertex3fv(vertices[d]); glEnd(); } Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Draw cube from faces void colorcube( ) { polygon(0,3,2,1); polygon(2,3,7,6); polygon(0,4,7,3); polygon(1,2,6,5); polygon(4,5,6,7); polygon(0,1,5,4); } 5 6 2 1 7 4 3 Note that vertices are ordered so that we obtain correct outward facing normals Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Efficiency The weakness of our approach is that we are building the model in the application and must do many function calls to draw the cube Drawing a cube by its faces in the most straight forward way requires 6 glBegin, 6 glEnd 6 glColor 24 glVertex More if we use texture and lighting Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Vertex Arrays OpenGL provides a facility called vertex arrays that allows us to store array data in the implementation Six types of arrays supported Vertices Colors Color indices Normals Texture coordinates Edge flags We will need only colors and vertices Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Initialization Using the same color and vertex data, first we enable glEnableClientState(GL_COLOR_ARRAY); glEnableClientState(GL_VERTEX_ARRAY); Identify location of arrays glVertexPointer(3, GL_FLOAT, 0, vertices); glColorPointer(3, GL_FLOAT, 0, colors); data array data contiguous 3d arrays stored as floats Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Mapping indices to faces
Form an array of face indices Each successive four indices describe a face of the cube Draw through glDrawElements which replaces all glVertex and glColor calls in the display callback GLubyte cubeIndices[24] = {0,3,2,1,2,3,7,6 0,4,7,3,1,2,6,5,4,5,6,7,0,1,5,4}; Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Drawing the cube Method 1: Method 2: number of indices what to draw for(i=0; i<6; i++) glDrawElements(GL_POLYGON, 4, GL_UNSIGNED_BYTE, &cubeIndices[4*i]); format of index data start of index data glDrawElements(GL_QUADS, 24, GL_UNSIGNED_BYTE, cubeIndices); Draws cube with 1 function call!! Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Classical Viewing Ed Angel

Objectives Introduce the classical views Compare and contrast image formation by computer with how images have been formed by architects, artists, and engineers Learn the benefits and drawbacks of each type of view Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Classical Viewing Viewing requires three basic elements One or more objects A viewer with a projection surface Projectors that go from the object(s) to the projection surface Classical views are based on the relationship among these elements The viewer picks up the object and orients it how she would like to see it Each object is assumed to constructed from flat principal faces Buildings, polyhedra, manufactured objects Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Planar Geometric Projections
Standard projections project onto a plane Projectors are lines that either converge at a center of projection are parallel Such projections preserve lines but not necessarily angles Nonplanar projections are needed for applications such as map construction Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Classical Projections
Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Perspective vs Parallel
Computer graphics treats all projections the same and implements them with a single pipeline Classical viewing developed different techniques for drawing each type of projection Fundamental distinction is between parallel and perspective viewing even though mathematically parallel viewing is the limit of perspective viewing Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Taxonomy of Planar Geometric Projections
parallel perspective 1 point 2 point 3 point multiview orthographic axonometric oblique isometric dimetric trimetric Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Perspective Projection

Parallel Projection Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Orthographic Projection
Projectors are orthogonal to projection surface Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Multiview Orthographic Projection
Projection plane parallel to principal face Usually form front, top, side views isometric (not multiview orthographic view) front in CAD and architecture, we often display three multiviews plus isometric side top Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Advantages and Disadvantages
Preserves both distances and angles Shapes preserved Can be used for measurements Building plans Manuals Cannot see what object really looks like because many surfaces hidden from view Often we add the isometric Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Axonometric Projections
Allow projection plane to move relative to object classify by how many angles of a corner of a projected cube are the same none: trimetric two: dimetric three: isometric q 1 q 2 q 3 Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Types of Axonometric Projections

Lines are scaled (foreshortened) but can find scaling factors Lines preserved but angles are not Projection of a circle in a plane not parallel to the projection plane is an ellipse Can see three principal faces of a box-like object Some optical illusions possible Parallel lines appear to diverge Does not look real because far objects are scaled the same as near objects Used in CAD applications Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Oblique Projection Arbitrary relationship between projectors and projection plane Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Can pick the angles to emphasize a particular face Architecture: plan oblique, elevation oblique Angles in faces parallel to projection plane are preserved while we can still see “around” side In physical world, cannot create with simple camera; possible with bellows camera or special lens (architectural) Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Perspective Projection
Projectors coverge at center of projection Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Vanishing Points Parallel lines (not parallel to the projection plan) on the object converge at a single point in the projection (the vanishing point) Drawing simple perspectives by hand uses these vanishing point(s) vanishing point Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Three-Point Perspective
No principal face parallel to projection plane Three vanishing points for cube Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Two-Point Perspective
On principal direction parallel to projection plane Two vanishing points for cube Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

One-Point Perspective
One principal face parallel to projection plane One vanishing point for cube Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Objects further from viewer are projected smaller than the same sized objects closer to the viewer (diminution) Looks realistic Equal distances along a line are not projected into equal distances (nonuniform foreshortening) Angles preserved only in planes parallel to the projection plane More difficult to construct by hand than parallel projections (but not more difficult by computer) Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Computer Viewing Ed Angel

Objectives Introduce the mathematics of projection Introduce OpenGL viewing functions Look at alternate viewing APIs Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Computer Viewing There are three aspects of the viewing process, all of which are implemented in the pipeline, Positioning the camera Setting the model-view matrix Selecting a lens Setting the projection matrix Clipping Setting the view volume Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

The OpenGL Camera In OpenGL, initially the object and camera frames are the same Default model-view matrix is an identity The camera is located at origin and points in the negative z direction OpenGL also specifies a default view volume that is a cube with sides of length 2 centered at the origin Default projection matrix is an identity Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Default Projection Default projection is orthogonal clipped out 2 z=0 Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Moving the Camera Frame
If we want to visualize object with both positive and negative z values we can either Move the camera in the positive z direction Translate the camera frame Move the objects in the negative z direction Translate the world frame Both of these views are equivalent and are determined by the model-view matrix Want a translation (glTranslatef(0.0,0.0,-d);) d > 0 Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Moving Camera back from Origin
frames after translation by –d d > 0 default frames Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Moving the Camera We can move the camera to any desired position by a sequence of rotations and translations Example: side view Rotate the camera Move it away from origin Model-view matrix C = TR Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

OpenGL code Remember that last transformation specified is first to be applied glMatrixMode(GL_MODELVIEW) glLoadIdentity(); glTranslatef(0.0, 0.0, -d); glRotatef(90.0, 0.0, 1.0, 0.0); Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

The LookAt Function The GLU library contains the function gluLookAt to form the required modelview matrix through a simple interface Note the need for setting an up direction Still need to initialize Can concatenate with modeling transformations Example: isometric view of cube aligned with axes glMatrixMode(GL_MODELVIEW): glLoadIdentity(); gluLookAt(1.0, 1.0, 1.0, 0.0, 0.0, 0.0, 0., ); Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

gluLookAt glLookAt(eyex, eyey, eyez, atx, aty, atz, upx, upy, upz) Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Other Viewing APIs The LookAt function is only one possible API for positioning the camera Others include View reference point, view plane normal, view up (PHIGS, GKS-3D) Yaw, pitch, roll Elevation, azimuth, twist Direction angles Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Projections and Normalization
The default projection in the eye (camera) frame is orthogonal For points within the default view volume Most graphics systems use view normalization All other views are converted to the default view by transformations that determine the projection matrix Allows use of the same pipeline for all views xp = x yp = y zp = 0 Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Homogeneous Coordinate Representation
default orthographic projection xp = x yp = y zp = 0 wp = 1 pp = Mp M = In practice, we can let M = I and set the z term to zero later Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Simple Perspective Center of projection at the origin Projection plane z = d, d < 0 Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Perspective Equations
Consider top and side views xp = yp = zp = d Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Homogeneous Coordinate Form
consider q = Mp where M = q =  p = Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Perspective Division However w  1, so we must divide by w to return from homogeneous coordinates This perspective division yields the desired perspective equations We will consider the corresponding clipping volume with the OpenGL functions xp = yp = zp = d Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

OpenGL Orthogonal Viewing
glOrtho(left,right,bottom,top,near,far) near and far measured from camera Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

OpenGL Perspective glFrustum(left,right,bottom,top,near,far) Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Using Field of View With glFrustum it is often difficult to get the desired view gluPerpective(fovy, aspect, near, far) often provides a better interface front plane aspect = w/h Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Projection Matrices Ed Angel
Professor of Computer Science, Electrical and Computer Engineering, and Media Arts University of New Mexico Angel: Interactive Computer Graphics 5 © Addison-Wesley 2009

Angel: Interactive Computer Graphics 5 © Addison-Wesley 2009
Objectives Derive the projection matrices used for standard OpenGL projections Introduce oblique projections Introduce projection normalization Angel: Interactive Computer Graphics 5 © Addison-Wesley 2009

Normalization Rather than derive a different projection matrix for each type of projection, we can convert all projections to orthogonal projections with the default view volume This strategy allows us to use standard transformations in the pipeline and makes for efficient clipping Angel: Interactive Computer Graphics 5 © Addison-Wesley 2009

Pipeline View modelview transformation projection transformation perspective division 4D  3D nonsingular clipping projection 3D  2D against default cube Angel: Interactive Computer Graphics 5 © Addison-Wesley 2009

Notes We stay in four-dimensional homogeneous coordinates through both the modelview and projection transformations Both these transformations are nonsingular Default to identity matrices (orthogonal view) Normalization lets us clip against simple cube regardless of type of projection Delay final projection until end Important for hidden-surface removal to retain depth information as long as possible Angel: Interactive Computer Graphics 5 © Addison-Wesley 2009

Orthogonal Normalization
glOrtho(left,right,bottom,top,near,far) normalization  find transformation to convert specified clipping volume to default Angel: Interactive Computer Graphics 5 © Addison-Wesley 2009

Orthogonal Matrix Two steps Move center to origin T(-(left+right)/2, -(bottom+top)/2,(near+far)/2)) Scale to have sides of length 2 S(2/(left-right),2/(top-bottom),2/(near-far)) P = ST = Angel: Interactive Computer Graphics 5 © Addison-Wesley 2009

Final Projection Set z =0 Equivalent to the homogeneous coordinate transformation Hence, general orthogonal projection in 4D is Morth = P = MorthST Angel: Interactive Computer Graphics 5 © Addison-Wesley 2009

Oblique Projections The OpenGL projection functions cannot produce general parallel projections such as However if we look at the example of the cube it appears that the cube has been sheared Oblique Projection = Shear + Orthogonal Projection Angel: Interactive Computer Graphics 5 © Addison-Wesley 2009

General Shear top view side view Angel: Interactive Computer Graphics 5 © Addison-Wesley 2009

Shear Matrix xy shear (z values unchanged) Projection matrix General case: H(q,f) = P = Morth H(q,f) P = Morth STH(q,f) Angel: Interactive Computer Graphics 5 © Addison-Wesley 2009

Equivalency Angel: Interactive Computer Graphics 5 © Addison-Wesley 2009

Effect on Clipping The projection matrix P = STH transforms the original clipping volume to the default clipping volume object top view z = 1 DOP DOP x = -1 x = 1 far plane z = -1 clipping volume near plane distorted object (projects correctly) Angel: Interactive Computer Graphics 5 © Addison-Wesley 2009

Simple Perspective Consider a simple perspective with the COP at the origin, the near clipping plane at z = -1, and a 90 degree field of view determined by the planes x = z, y = z Angel: Interactive Computer Graphics 5 © Addison-Wesley 2009

Perspective Matrices Simple projection matrix in homogeneous coordinates Note that this matrix is independent of the far clipping plane M = Angel: Interactive Computer Graphics 5 © Addison-Wesley 2009

Generalization N = after perspective division, the point (x, y, z, 1) goes to x’’ = x/z y’’ = y/z Z’’ = -(a+b/z) which projects orthogonally to the desired point regardless of a and b Angel: Interactive Computer Graphics 5 © Addison-Wesley 2009

Picking a and b If we pick a = b = the near plane is mapped to z = -1 the far plane is mapped to z =1 and the sides are mapped to x =  1, y =  1 Hence the new clipping volume is the default clipping volume Angel: Interactive Computer Graphics 5 © Addison-Wesley 2009

Normalization Transformation
distorted object projects correctly original clipping volume original object new clipping volume Angel: Interactive Computer Graphics 5 © Addison-Wesley 2009

Normalization and Hidden-Surface Removal
Although our selection of the form of the perspective matrices may appear somewhat arbitrary, it was chosen so that if z1 > z2 in the original clipping volume then the for the transformed points z1’ > z2’ Thus hidden surface removal works if we first apply the normalization transformation However, the formula z’’ = -(a+b/z) implies that the distances are distorted by the normalization which can cause numerical problems especially if the near distance is small Angel: Interactive Computer Graphics 5 © Addison-Wesley 2009

OpenGL Perspective glFrustum allows for an unsymmetric viewing frustum (although gluPerspective does not) Angel: Interactive Computer Graphics 5 © Addison-Wesley 2009

OpenGL Perspective Matrix
The normalization in glFrustum requires an initial shear to form a right viewing pyramid, followed by a scaling to get the normalized perspective volume. Finally, the perspective matrix results in needing only a final orthogonal transformation P = NSH our previously defined perspective matrix shear and scale Angel: Interactive Computer Graphics 5 © Addison-Wesley 2009

Why do we do it this way? Normalization allows for a single pipeline for both perspective and orthogonal viewing We stay in four dimensional homogeneous coordinates as long as possible to retain three-dimensional information needed for hidden-surface removal and shading We simplify clipping Angel: Interactive Computer Graphics 5 © Addison-Wesley 2009

Shading I Ed Angel Professor of Computer Science, Electrical and Computer Engineering, and Media Arts University of New Mexico Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Objectives Learn to shade objects so their images appear three-dimensional Introduce the types of light-material interactions Build a simple reflection model---the Phong model--- that can be used with real time graphics hardware Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Why we need shading Suppose we build a model of a sphere using many polygons and color it with glColor. We get something like But we want Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Shading Why does the image of a real sphere look like Light-material interactions cause each point to have a different color or shade Need to consider Light sources Material properties Location of viewer Surface orientation Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Scattering Light strikes A Some scattered Some absorbed Some of scattered light strikes B Some of this scattered light strikes A and so on Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Rendering Equation The infinite scattering and absorption of light can be described by the rendering equation Cannot be solved in general Ray tracing is a special case for perfectly reflecting surfaces Rendering equation is global and includes Shadows Multiple scattering from object to object Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Global Effects shadow multiple reflection translucent surface Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Local vs Global Rendering
Correct shading requires a global calculation involving all objects and light sources Incompatible with pipeline model which shades each polygon independently (local rendering) However, in computer graphics, especially real time graphics, we are happy if things “look right” Exist many techniques for approximating global effects Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Light-Material Interaction
Light that strikes an object is partially absorbed and partially scattered (reflected) The amount reflected determines the color and brightness of the object A surface appears red under white light because the red component of the light is reflected and the rest is absorbed The reflected light is scattered in a manner that depends on the smoothness and orientation of the surface Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Light Sources General light sources are difficult to work with because we must integrate light coming from all points on the source Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Simple Light Sources Point source Model with position and color Distant source = infinite distance away (parallel) Spotlight Restrict light from ideal point source Ambient light Same amount of light everywhere in scene Can model contribution of many sources and reflecting surfaces Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Surface Types The smoother a surface, the more reflected light is concentrated in the direction a perfect mirror would reflected the light A very rough surface scatters light in all directions rough surface smooth surface Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Phong Model A simple model that can be computed rapidly Has three components Diffuse Specular Ambient Uses four vectors To source To viewer Normal Perfect reflector Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Ideal Reflector Normal is determined by local orientation Angle of incidence = angle of relection The three vectors must be coplanar r = 2 (l · n ) n - l Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Lambertian Surface Perfectly diffuse reflector Light scattered equally in all directions Amount of light reflected is proportional to the vertical component of incoming light reflected light ~cos qi cos qi = l · n if vectors normalized There are also three coefficients, kr, kb, kg that show how much of each color component is reflected Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Specular Surfaces Most surfaces are neither ideal diffusers nor perfectly specular (ideal reflectors) Smooth surfaces show specular highlights due to incoming light being reflected in directions concentrated close to the direction of a perfect reflection specular highlight Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Modeling Specular Relections
Phong proposed using a term that dropped off as the angle between the viewer and the ideal reflection increased Ir ~ ks I cosaf f shininess coef reflected intensity incoming intensity absorption coef Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

The Shininess Coefficient
Values of a between 100 and 200 correspond to metals Values between 5 and 10 give surface that look like plastic cosa f -90 f 90 Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Shading II Ed Angel Professor of Computer Science, Electrical and Computer Engineering, and Media Arts University of New Mexico Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Objectives Continue discussion of shading Introduce modified Phong model Consider computation of required vectors Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Ambient Light Ambient light is the result of multiple interactions between (large) light sources and the objects in the environment Amount and color depend on both the color of the light(s) and the material properties of the object Add ka Ia to diffuse and specular terms reflection coef intensity of ambient light Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Distance Terms The light from a point source that reaches a surface is inversely proportional to the square of the distance between them We can add a factor of the form 1/(ad + bd +cd2) to the diffuse and specular terms The constant and linear terms soften the effect of the point source Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Light Sources In the Phong Model, we add the results from each light source Each light source has separate diffuse, specular, and ambient terms to allow for maximum flexibility even though this form does not have a physical justification Separate red, green and blue components Hence, 9 coefficients for each point source Idr, Idg, Idb, Isr, Isg, Isb, Iar, Iag, Iab Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Material Properties Material properties match light source properties Nine absorbtion coefficients kdr, kdg, kdb, ksr, ksg, ksb, kar, kag, kab Shininess coefficient a Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Adding up the Components
For each light source and each color component, the Phong model can be written (without the distance terms) as I =kd Id l · n + ks Is (v · r )a + ka Ia For each color component we add contributions from all sources Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Modified Phong Model The specular term in the Phong model is problematic because it requires the calculation of a new reflection vector and view vector for each vertex Blinn suggested an approximation using the halfway vector that is more efficient Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

The Halfway Vector h is normalized vector halfway between l and v h = ( l + v )/ | l + v | Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Using the halfway vector
Replace (v · r )a by (n · h )b b is chosen to match shineness Note that halway angle is half of angle between r and v if vectors are coplanar Resulting model is known as the modified Phong or Blinn lighting model Specified in OpenGL standard Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Example Only differences in these teapots are the parameters in the modified Phong model Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Computation of Vectors
l and v are specified by the application Can computer r from l and n Problem is determining n For simple surfaces is can be determined but how we determine n differs depending on underlying representation of surface OpenGL leaves determination of normal to application Exception for GLU quadrics and Bezier surfaces (Chapter 11) Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Plane Normals Equation of plane: ax+by+cz+d = 0 From Chapter 4 we know that plane is determined by three points p0, p2, p3 or normal n and p0 Normal can be obtained by n = (p2-p0) × (p1-p0) Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Normal to Sphere Implicit function f(x,y.z)=0 Normal given by gradient Sphere f(p)=p·p-1 n = [∂f/∂x, ∂f/∂y, ∂f/∂z]T=p Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Parametric Form For sphere Tangent plane determined by vectors Normal given by cross product x=x(u,v)=cos u sin v y=y(u,v)=cos u cos v z= z(u,v)=sin u ∂p/∂u = [∂x/∂u, ∂y/∂u, ∂z/∂u]T ∂p/∂v = [∂x/∂v, ∂y/∂v, ∂z/∂v]T n = ∂p/∂u × ∂p/∂v Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

General Case We can compute parametric normals for other simple cases Quadrics Parameteric polynomial surfaces Bezier surface patches (Chapter 11) Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Shading in OpenGL Ed Angel

Objectives Introduce the OpenGL shading functions Discuss polygonal shading Flat Smooth Gouraud Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Steps in OpenGL shading
Enable shading and select model Specify normals Specify material properties Specify lights Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Normals In OpenGL the normal vector is part of the state Set by glNormal*() glNormal3f(x, y, z); glNormal3fv(p); Usually we want to set the normal to have unit length so cosine calculations are correct Length can be affected by transformations Note that scaling does not preserved length glEnable(GL_NORMALIZE) allows for autonormalization at a performance penalty Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Normal for Triangle n p2 plane n ·(p - p0 ) = 0 n = (p2 - p0 ) ×(p1 - p0 ) p p1 normalize n  n/ |n| p0 Note that right-hand rule determines outward face Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Enabling Shading Shading calculations are enabled by glEnable(GL_LIGHTING) Once lighting is enabled, glColor() ignored Must enable each light source individually glEnable(GL_LIGHTi) i=0,1….. Can choose light model parameters glLightModeli(parameter, GL_TRUE) GL_LIGHT_MODEL_LOCAL_VIEWER do not use simplifying distant viewer assumption in calculation GL_LIGHT_MODEL_TWO_SIDED shades both sides of polygons independently Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Defining a Point Light Source
For each light source, we can set an RGBA for the diffuse, specular, and ambient components, and for the position GL float diffuse0[]={1.0, 0.0, 0.0, 1.0}; GL float ambient0[]={1.0, 0.0, 0.0, 1.0}; GL float specular0[]={1.0, 0.0, 0.0, 1.0}; Glfloat light0_pos[]={1.0, 2.0, 3,0, 1.0}; glEnable(GL_LIGHTING); glEnable(GL_LIGHT0); glLightv(GL_LIGHT0, GL_POSITION, light0_pos); glLightv(GL_LIGHT0, GL_AMBIENT, ambient0); glLightv(GL_LIGHT0, GL_DIFFUSE, diffuse0); glLightv(GL_LIGHT0, GL_SPECULAR, specular0); Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Distance and Direction
The source colors are specified in RGBA The position is given in homogeneous coordinates If w =1.0, we are specifying a finite location If w =0.0, we are specifying a parallel source with the given direction vector The coefficients in the distance terms are by default a=1.0 (constant terms), b=c=0.0 (linear and quadratic terms). Change by a= 0.80; glLightf(GL_LIGHT0, GLCONSTANT_ATTENUATION, a); Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Spotlights Use glLightv to set Direction GL_SPOT_DIRECTION Cutoff GL_SPOT_CUTOFF Attenuation GL_SPOT_EXPONENT Proportional to cosaf f -q q Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Global Ambient Light Ambient light depends on color of light sources A red light in a white room will cause a red ambient term that disappears when the light is turned off OpenGL also allows a global ambient term that is often helpful for testing glLightModelfv(GL_LIGHT_MODEL_AMBIENT, global_ambient) Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Moving Light Sources Light sources are geometric objects whose positions or directions are affected by the model-view matrix Depending on where we place the position (direction) setting function, we can Move the light source(s) with the object(s) Fix the object(s) and move the light source(s) Fix the light source(s) and move the object(s) Move the light source(s) and object(s) independently Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Material Properties Material properties are also part of the OpenGL state and match the terms in the modified Phong model Set by glMaterialv() GLfloat ambient[] = {0.2, 0.2, 0.2, 1.0}; GLfloat diffuse[] = {1.0, 0.8, 0.0, 1.0}; GLfloat specular[] = {1.0, 1.0, 1.0, 1.0}; GLfloat shine = 100.0 glMaterialf(GL_FRONT, GL_AMBIENT, ambient); glMaterialf(GL_FRONT, GL_DIFFUSE, diffuse); glMaterialf(GL_FRONT, GL_SPECULAR, specular); glMaterialf(GL_FRONT, GL_SHININESS, shine); Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Front and Back Faces The default is shade only front faces which works correctly for convex objects If we set two sided lighting, OpenGL will shade both sides of a surface Each side can have its own properties which are set by using GL_FRONT, GL_BACK, or GL_FRONT_AND_BACK in glMaterialf back faces not visible back faces visible Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Emissive Term We can simulate a light source in OpenGL by giving a material an emissive component This component is unaffected by any sources or transformations GLfloat emission[] = 0.0, 0.3, 0.3, 1.0); glMaterialf(GL_FRONT, GL_EMISSION, emission); Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Transparency Material properties are specified as RGBA values The A value can be used to make the surface translucent The default is that all surfaces are opaque regardless of A Later we will enable blending and use this feature Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Efficiency Because material properties are part of the state, if we change materials for many surfaces, we can affect performance We can make the code cleaner by defining a material structure and setting all materials during initialization We can then select a material by a pointer typedef struct materialStruct { GLfloat ambient[4]; GLfloat diffuse[4]; GLfloat specular[4]; GLfloat shineness; } MaterialStruct; Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Polygonal Shading Shading calculations are done for each vertex Vertex colors become vertex shades By default, vertex shades are interpolated across the polygon glShadeModel(GL_SMOOTH); If we use glShadeModel(GL_FLAT); the color at the first vertex will determine the shade of the whole polygon Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Polygon Normals Polygons have a single normal Shades at the vertices as computed by the Phong model can be almost same Identical for a distant viewer (default) or if there is no specular component Consider model of sphere Want different normals at each vertex even though this concept is not quite correct mathematically Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Smooth Shading We can set a new normal at each vertex Easy for sphere model If centered at origin n = p Now smooth shading works Note silhouette edge Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Mesh Shading The previous example is not general because we knew the normal at each vertex analytically For polygonal models, Gouraud proposed we use the average of the normals around a mesh vertex n = (n1+n2+n3+n4)/ |n1+n2+n3+n4| Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Gouraud and Phong Shading
Gouraud Shading Find average normal at each vertex (vertex normals) Apply modified Phong model at each vertex Interpolate vertex shades across each polygon Phong shading Find vertex normals Interpolate vertex normals across edges Interpolate edge normals across polygon Apply modified Phong model at each fragment Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Comparison If the polygon mesh approximates surfaces with a high curvatures, Phong shading may look smooth while Gouraud shading may show edges Phong shading requires much more work than Gouraud shading Until recently not available in real time systems Now can be done using fragment shaders (see Chapter 9) Both need data structures to represent meshes so we can obtain vertex normals Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Implementation I Ed Angel

Objectives Introduce basic implementation strategies Clipping Scan conversion Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Overview At end of the geometric pipeline, vertices have been assembled into primitives Must clip out primitives that are outside the view frustum Algorithms based on representing primitives by lists of vertices Must find which pixels can be affected by each primitive Fragment generation Rasterization or scan conversion Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Required Tasks Clipping Rasterization or scan conversion Transformations Some tasks deferred until fragement processing Hidden surface removal Antialiasing Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Rasterization Meta Algorithms
Consider two approaches to rendering a scene with opaque objects For every pixel, determine which object that projects on the pixel is closest to the viewer and compute the shade of this pixel Ray tracing paradigm For every object, determine which pixels it covers and shade these pixels Pipeline approach Must keep track of depths Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Clipping 2D against clipping window 3D against clipping volume Easy for line segments polygons Hard for curves and text Convert to lines and polygons first Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Clipping 2D Line Segments
Brute force approach: compute intersections with all sides of clipping window Inefficient: one division per intersection Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Cohen-Sutherland Algorithm
Idea: eliminate as many cases as possible without computing intersections Start with four lines that determine the sides of the clipping window y = ymax x = xmin x = xmax y = ymin Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

The Cases Case 1: both endpoints of line segment inside all four lines Draw (accept) line segment as is Case 2: both endpoints outside all lines and on same side of a line Discard (reject) the line segment y = ymax x = xmin x = xmax y = ymin Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

The Cases Case 3: One endpoint inside, one outside Must do at least one intersection Case 4: Both outside May have part inside y = ymax x = xmin x = xmax Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Defining Outcodes For each endpoint, define an outcode Outcodes divide space into 9 regions Computation of outcode requires at most 4 subtractions b0b1b2b3 b0 = 1 if y > ymax, 0 otherwise b1 = 1 if y < ymin, 0 otherwise b2 = 1 if x > xmax, 0 otherwise b3 = 1 if x < xmin, 0 otherwise Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Using Outcodes Consider the 5 cases below AB: outcode(A) = outcode(B) = 0 Accept line segment Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Using Outcodes CD: outcode (C) = 0, outcode(D)  0 Compute intersection Location of 1 in outcode(D) determines which edge to intersect with Note if there were a segment from A to a point in a region with 2 ones in outcode, we might have to do two interesections Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Using Outcodes EF: outcode(E) logically ANDed with outcode(F) (bitwise)  0 Both outcodes have a 1 bit in the same place Line segment is outside of corresponding side of clipping window reject Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Using Outcodes GH and IJ: same outcodes, neither zero but logical AND yields zero Shorten line segment by intersecting with one of sides of window Compute outcode of intersection (new endpoint of shortened line segment) Reexecute algorithm Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Efficiency In many applications, the clipping window is small relative to the size of the entire data base Most line segments are outside one or more side of the window and can be eliminated based on their outcodes Inefficiency when code has to be reexecuted for line segments that must be shortened in more than one step Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Cohen Sutherland in 3D Use 6-bit outcodes When needed, clip line segment against planes Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Liang-Barsky Clipping
Consider the parametric form of a line segment We can distinguish between the cases by looking at the ordering of the values of a where the line determined by the line segment crosses the lines that determine the window p(a) = (1-a)p1+ ap2 1  a  0 p2 p1 Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Liang-Barsky Clipping
In (a): a4 > a3 > a2 > a1 Intersect right, top, left, bottom: shorten In (b): a4 > a2 > a3 > a1 Intersect right, left, top, bottom: reject Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Advantages Can accept/reject as easily as with Cohen-Sutherland Using values of a, we do not have to use algorithm recursively as with C-S Extends to 3D Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Clipping and Normalization
General clipping in 3D requires intersection of line segments against arbitrary plane Example: oblique view Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Plane-Line Intersections

Normalized Form top view before normalization after normalization Normalization is part of viewing (pre clipping) but after normalization, we clip against sides of right parallelepiped Typical intersection calculation now requires only a floating point subtraction, e.g. is x > xmax ? Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

University of New Mexico
Implementation II Ed Angel Professor of Computer Science, Electrical and Computer Engineering, and Media Arts University of New Mexico

Objectives Introduce clipping algorithms for polygons Survey hidden-surface algorithms Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Polygon Clipping Not as simple as line segment clipping Clipping a line segment yields at most one line segment Clipping a polygon can yield multiple polygons However, clipping a convex polygon can yield at most one other polygon Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Tessellation and Convexity
One strategy is to replace nonconvex (concave) polygons with a set of triangular polygons (a tessellation) Also makes fill easier Tessellation code in GLU library Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Clipping as a Black Box Can consider line segment clipping as a process that takes in two vertices and produces either no vertices or the vertices of a clipped line segment Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Pipeline Clipping of Line Segments
Clipping against each side of window is independent of other sides Can use four independent clippers in a pipeline Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Pipeline Clipping of Polygons
Three dimensions: add front and back clippers Strategy used in SGI Geometry Engine Small increase in latency Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Bounding Boxes Rather than doing clipping on a complex polygon, we can use an axis-aligned bounding box or extent Smallest rectangle aligned with axes that encloses the polygon Simple to compute: max and min of x and y Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Bounding boxes Can usually determine accept/reject based only on bounding box reject accept requires detailed clipping Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Clipping and Visibility
Clipping has much in common with hidden-surface removal In both cases, we are trying to remove objects that are not visible to the camera Often we can use visibility or occlusion testing early in the process to eliminate as many polygons as possible before going through the entire pipeline Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Hidden Surface Removal
Object-space approach: use pairwise testing between polygons (objects) Worst case complexity O(n2) for n polygons partially obscuring can draw independently Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Painter’s Algorithm Render polygons a back to front order so that polygons behind others are simply painted over Fill B then A B behind A as seen by viewer Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Depth Sort Requires ordering of polygons first O(n log n) calculation for ordering Not every polygon is either in front or behind all other polygons Order polygons and deal with easy cases first, harder later Polygons sorted by distance from COP Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Easy Cases A lies behind all other polygons Can render Polygons overlap in z but not in either x or y Can render independently Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Hard Cases cyclic overlap Overlap in all directions but can one is fully on one side of the other penetration Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Back-Face Removal (Culling)
face is visible iff 90    -90 equivalently cos   0 or v • n  0  plane of face has form ax + by +cz +d =0 but after normalization n = ( )T need only test the sign of c In OpenGL we can simply enable culling but may not work correctly if we have nonconvex objects Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Image Space Approach Look at each projector (nm for an n x m frame buffer) and find closest of k polygons Complexity O(nmk) Ray tracing z-buffer Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

z-Buffer Algorithm Use a buffer called the z or depth buffer to store the depth of the closest object at each pixel found so far As we render each polygon, compare the depth of each pixel to depth in z buffer If less, place shade of pixel in color buffer and update z buffer Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Efficiency If we work scan line by scan line as we move across a scan line, the depth changes satisfy ax+by+cz=0 Along scan line y = 0 z = x In screen space x = 1 Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Scan-Line Algorithm Can combine shading and hsr through scan line algorithm scan line i: no need for depth information, can only be in no or one polygon scan line j: need depth information only when in more than one polygon Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Implementation Need a data structure to store Flag for each polygon (inside/outside) Incremental structure for scan lines that stores which edges are encountered Parameters for planes Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Visibility Testing In many realtime applications, such as games, we want to eliminate as many objects as possible within the application Reduce burden on pipeline Reduce traffic on bus Partition space with Binary Spatial Partition (BSP) Tree Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Simple Example consider 6 parallel polygons top view The plane of A separates B and C from D, E and F Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

BSP Tree Can continue recursively Plane of C separates B from A Plane of D separates E and F Can put this information in a BSP tree Use for visibility and occlusion testing Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Implementation III Ed Angel Professor of Computer Science, Electrical and Computer Engineering, and Media Arts University of New Mexico

Objectives Survey Line Drawing Algorithms DDA Bresenham Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Rasterization Rasterization (scan conversion) Determine which pixels that are inside primitive specified by a set of vertices Produces a set of fragments Fragments have a location (pixel location) and other attributes such color and texture coordinates that are determined by interpolating values at vertices Pixel colors determined later using color, texture, and other vertex properties Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Scan Conversion of Line Segments
Start with line segment in window coordinates with integer values for endpoints Assume implementation has a write_pixel function y = mx + h Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

DDA Algorithm Digital Differential Analyzer DDA was a mechanical device for numerical solution of differential equations Line y=mx+ h satisfies differential equation dy/dx = m = Dy/Dx = y2-y1/x2-x1 Along scan line Dx = 1 For(x=x1; x<=x2,ix++) { y+=m; write_pixel(x, round(y), line_color) } Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Problem DDA = for each x plot pixel at closest y Problems for steep lines Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Using Symmetry Use for 1  m  0 For m > 1, swap role of x and y For each y, plot closest x Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Bresenham’s Algorithm
DDA requires one floating point addition per step We can eliminate all fp through Bresenham’s algorithm Consider only 1  m  0 Other cases by symmetry Assume pixel centers are at half integers If we start at a pixel that has been written, there are only two candidates for the next pixel to be written into the frame buffer Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Candidate Pixels 1  m  0 candidates last pixel Note that line could have passed through any part of this pixel Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Decision Variable d = Dx(b-a) d is an integer d > 0 use upper pixel d < 0 use lower pixel - Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Incremental Form More efficient if we look at dk, the value of the decision variable at x = k dk+1= dk –2Dy, if dk <0 dk+1= dk –2(Dy- Dx), otherwise For each x, we need do only an integer addition and a test Single instruction on graphics chips Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Polygon Scan Conversion
Scan Conversion = Fill How to tell inside from outside Convex easy Nonsimple difficult Odd even test Count edge crossings Winding number odd-even fill Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Winding Number Count clockwise encirclements of point Alternate definition of inside: inside if winding number  0 winding number = 1 winding number = 2 Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Filling in the Frame Buffer
Fill at end of pipeline Convex Polygons only Nonconvex polygons assumed to have been tessellated Shades (colors) have been computed for vertices (Gouraud shading) Combine with z-buffer algorithm March across scan lines interpolating shades Incremental work small Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Using Interpolation C1 C2 C3 specified by glColor or by vertex shading C4 determined by interpolating between C1 and C2 C5 determined by interpolating between C2 and C3 interpolate between C4 and C5 along span C1 C4 C2 scan line C5 span C3 Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Flood Fill Fill can be done recursively if we know a seed point located inside (WHITE) Scan convert edges into buffer in edge/inside color (BLACK) flood_fill(int x, int y) { if(read_pixel(x,y)= = WHITE) { write_pixel(x,y,BLACK); flood_fill(x-1, y); flood_fill(x+1, y); flood_fill(x, y+1); flood_fill(x, y-1); } } Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Scan Line Fill Can also fill by maintaining a data structure of all intersections of polygons with scan lines Sort by scan line Fill each span vertex order generated by vertex list desired order Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Data Structure Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Aliasing Ideal rasterized line should be 1 pixel wide Choosing best y for each x (or visa versa) produces aliased raster lines Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Antialiasing by Area Averaging
Color multiple pixels for each x depending on coverage by ideal line antialiased original magnified Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Polygon Aliasing Aliasing problems can be serious for polygons Jaggedness of edges Small polygons neglected Need compositing so color of one polygon does not totally determine color of pixel All three polygons should contribute to color Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Buffers Ed Angel Professor of Computer Science, Electrical and Computer Engineering, and Media Arts University of New Mexico

Objectives Introduce additional OpenGL buffers Learn to read and write buffers Learn to use blending Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Buffer Define a buffer by its spatial resolution (n x m) and its depth (or precision) k, the number of bits/pixel pixel Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

OpenGL Frame Buffer Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

OpenGL Buffers Color buffers can be displayed Front Back Auxiliary Overlay Depth Accumulation High resolution buffer Stencil Holds masks Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Writing in Buffers Conceptually, we can consider all of memory as a large two-dimensional array of pixels We read and write rectangular block of pixels Bit block transfer (bitblt) operations The frame buffer is part of this memory memory source frame buffer (destination) writing into frame buffer Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Writing Model Read destination pixel before writing source Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Bit Writing Modes Source and destination bits are combined bitwise 16 possible functions (one per column in table) XOR replace OR Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

XOR mode Recall from Chapter 3 that we can use XOR by enabling logic operations and selecting the XOR write mode XOR is especially useful for swapping blocks of memory such as menus that are stored off screen If S represents screen and M represents a menu the sequence S  S  M M  S  M swaps the S and M Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

The Pixel Pipeline OpenGL has a separate pipeline for pixels Writing pixels involves Moving pixels from processor memory to the frame buffer Format conversions Mapping, Lookups, Tests Reading pixels Format conversion Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Raster Position OpenGL maintains a raster position as part of the state Set by glRasterPos*() glRasterPos3f(x, y, z); The raster position is a geometric entity Passes through geometric pipeline Eventually yields a 2D position in screen coordinates This position in the frame buffer is where the next raster primitive is drawn Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Buffer Selection OpenGL can draw into or read from any of the color buffers (front, back, auxiliary) Default to the back buffer Change with glDrawBuffer and glReadBuffer Note that format of the pixels in the frame buffer is different from that of processor memory and these two types of memory reside in different places Need packing and unpacking Drawing and reading can be slow Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Bitmaps OpenGL treats 1-bit pixels (bitmaps) differently from multi-bit pixels (pixelmaps) Bitmaps are masks that determine if the corresponding pixel in the frame buffer is drawn with the present raster color 0  color unchanged 1  color changed based on writing mode Bitmaps are useful for raster text GLUT font: GLUT_BIT_MAP_8_BY_13 Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Raster Color Same as drawing color set by glColor*() Fixed by last call to glRasterPos*() Geometry drawn in blue Ones in bitmap use a drawing color of red glColor3f(1.0, 0.0, 0.0); glRasterPos3f(x, y, z); glColor3f(0.0, 0.0, 1.0); glBitmap(……. glBegin(GL_LINES); glVertex3f(…..) Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Drawing Bitmaps glBitmap(width, height, x0, y0, xi, yi, bitmap) offset from raster position increments in raster position after bitmap drawn first raster position second raster position Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Example: Checker Board
GLubyte wb[2] = {0 x 00, 0 x ff}; GLubyte check[512]; int i, j; for(i=0; i<64; i++) for (j=0; j<64, j++) check[i*8+j] = wb[(i/8+j)%2]; glBitmap( 64, 64, 0.0, 0.0, 0.0, 0.0, check); Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Pixel Maps OpenGL works with rectangular arrays of pixels called pixel maps or images Pixels are in one byte ( 8 bit) chunks Luminance (gray scale) images 1 byte/pixel RGB 3 bytes/pixel Three functions Draw pixels: processor memory to frame buffer Read pixels: frame buffer to processor memory Copy pixels: frame buffer to frame buffer Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

OpenGL Pixel Functions
glReadPixels(x,y,width,height,format,type,myimage) size type of pixels start pixel in frame buffer type of image pointer to processor memory GLubyte myimage[512][512][3]; glReadPixels(0,0, 512, 512, GL_RGB, GL_UNSIGNED_BYTE, myimage); glDrawPixels(width,height,format,type,myimage) starts at raster position Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Image Formats We often work with images in a standard format (JPEG, TIFF, GIF) How do we read/write such images with OpenGL? No support in OpenGL OpenGL knows nothing of image formats Some code available on Web Can write readers/writers for some simple formats in OpenGL Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Displaying a PPM Image PPM is a very simple format Each image file consists of a header followed by all the pixel data Header P3 # comment 1 # comment 2 . #comment n rows columns maxvalue pixels Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Reading the Header FILE *fd; int k, nm; char c; int i; char b[100]; float s; int red, green, blue; printf("enter file name\n"); scanf("%s", b); fd = fopen(b, "r"); fscanf(fd,"%[^\n] ",b); if(b[0]!='P'|| b[1] != '3'){ printf("%s is not a PPM file!\n", b); exit(0); } printf("%s is a PPM file\n",b); check for “P3” in first line Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Reading the Header (cont)
fscanf(fd, "%c",&c); while(c == '#') { fscanf(fd, "%[^\n] ", b); printf("%s\n",b); } ungetc(c,fd); skip over comments by looking for # in first column Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Reading the Data fscanf(fd, "%d %d %d", &n, &m, &k); printf("%d rows %d columns max value= %d\n",n,m,k); nm = n*m; image=malloc(3*sizeof(GLuint)*nm); s=255./k; for(i=0;i<nm;i++) { fscanf(fd,"%d %d %d",&red, &green, &blue ); image[3*nm-3*i-3]=red; image[3*nm-3*i-2]=green; image[3*nm-3*i-1]=blue; } scale factor Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Scaling the Image Data We can scale the image in the pipeline glPixelTransferf(GL_RED_SCALE, s); glPixelTransferf(GL_GREEN_SCALE, s); glPixelTransferf(GL_BLUE_SCALE, s); We may have to swap bytes when we go from processor memory to the frame buffer depending on the processor. If so, we can use glPixelStorei(GL_UNPACK_SWAP_BYTES,GL_TRUE); Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

The display callback void display() { glClear(GL_COLOR_BUFFER_BIT); glRasterPos2i(0,0); glDrawPixels(n,m,GL_RGB, GL_UNSIGNED_INT, image); glFlush(); } Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Texture Mapping Ed Angel Professor of Computer Science, Electrical and Computer Engineering, and Media Arts University of New Mexico

Objectives Introduce Mapping Methods Texture Mapping Environment Mapping Bump Mapping Consider basic strategies Forward vs backward mapping Point sampling vs area averaging Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

The Limits of Geometric Modeling
Although graphics cards can render over 10 million polygons per second, that number is insufficient for many phenomena Clouds Grass Terrain Skin Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Modeling an Orange Consider the problem of modeling an orange (the fruit) Start with an orange-colored sphere Too simple Replace sphere with a more complex shape Does not capture surface characteristics (small dimples) Takes too many polygons to model all the dimples Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Modeling an Orange (2) Take a picture of a real orange, scan it, and “paste” onto simple geometric model This process is known as texture mapping Still might not be sufficient because resulting surface will be smooth Need to change local shape Bump mapping Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Three Types of Mapping Texture Mapping Uses images to fill inside of polygons Environment (reflection mapping) Uses a picture of the environment for texture maps Allows simulation of highly specular surfaces Bump mapping Emulates altering normal vectors during the rendering process Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Texture Mapping geometric model texture mapped Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Environment Mapping Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Bump Mapping Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Where does mapping take place?
Mapping techniques are implemented at the end of the rendering pipeline Very efficient because few polygons make it past the clipper Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Is it simple? Although the idea is simple---map an image to a surface---there are 3 or 4 coordinate systems involved 2D image 3D surface Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Coordinate Systems Parametric coordinates May be used to model curves and surfaces Texture coordinates Used to identify points in the image to be mapped Object or World Coordinates Conceptually, where the mapping takes place Window Coordinates Where the final image is really produced Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Texture Mapping parametric coordinates texture coordinates window coordinates world coordinates Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Mapping Functions Basic problem is how to find the maps Consider mapping from texture coordinates to a point a surface Appear to need three functions x = x(s,t) y = y(s,t) z = z(s,t) But we really want to go the other way (x,y,z) t s Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Backward Mapping We really want to go backwards Given a pixel, we want to know to which point on an object it corresponds Given a point on an object, we want to know to which point in the texture it corresponds Need a map of the form s = s(x,y,z) t = t(x,y,z) Such functions are difficult to find in general Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Two-part mapping One solution to the mapping problem is to first map the texture to a simple intermediate surface Example: map to cylinder Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Cylindrical Mapping parametric cylinder x = r cos 2p u y = r sin 2pu z = v/h maps rectangle in u,v space to cylinder of radius r and height h in world coordinates s = u t = v maps from texture space Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Spherical Map We can use a parametric sphere x = r cos 2pu y = r sin 2pu cos 2pv z = r sin 2pu sin 2pv in a similar manner to the cylinder but have to decide where to put the distortion Spheres are used in environmental maps Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Box Mapping Easy to use with simple orthographic projection Also used in environment maps Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Second Mapping Map from intermediate object to actual object Normals from intermediate to actual Normals from actual to intermediate Vectors from center of intermediate actual intermediate Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Aliasing Point sampling of the texture can lead to aliasing errors point samples in u,v (or x,y,z) space miss blue stripes point samples in texture space Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Area Averaging A better but slower option is to use area averaging pixel preimage Note that preimage of pixel is curved Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

OpenGL Texture Mapping
Ed Angel Professor of Computer Science, Electrical and Computer Engineering, and Media Arts University of New Mexico

Objectives Introduce the OpenGL texture functions and options Angel: Interactive Computer Graphics 45E © Addison-Wesley 2009

Basic Stragegy Three steps to applying a texture specify the texture read or generate image assign to texture enable texturing assign texture coordinates to vertices Proper mapping function is left to application specify texture parameters wrapping, filtering Angel: Interactive Computer Graphics 45E © Addison-Wesley 2009

Texture Mapping x y z geometry display s t image Angel: Interactive Computer Graphics 45E © Addison-Wesley 2009

Texture Example The texture (below) is a 256 x 256 image that has been mapped to a rectangular polygon which is viewed in perspective Angel: Interactive Computer Graphics 45E © Addison-Wesley 2009

Texture Mapping and the OpenGL Pipeline
Images and geometry flow through separate pipelines that join during fragment processing “complex” textures do not affect geometric complexity geometry pipeline vertices pixel pipeline image fragmentprocessor Angel: Interactive Computer Graphics 45E © Addison-Wesley 2009

Specifying a Texture Image
Define a texture image from an array of texels (texture elements) in CPU memory Glubyte my_texels[512][512]; Define as any other pixel map Scanned image Generate by application code Enable texture mapping glEnable(GL_TEXTURE_2D) OpenGL supports 1-4 dimensional texture maps Angel: Interactive Computer Graphics 45E © Addison-Wesley 2009

Define Image as a Texture
glTexImage2D( target, level, components, w, h, border, format, type, texels ); target: type of texture, e.g. GL_TEXTURE_2D level: used for mipmapping (discussed later) components: elements per texel w, h: width and height of texels in pixels border: used for smoothing (discussed later) format and type: describe texels texels: pointer to texel array glTexImage2D(GL_TEXTURE_2D, 0, 3, 512, 512, 0, GL_RGB, GL_UNSIGNED_BYTE, my_texels); Angel: Interactive Computer Graphics 45E © Addison-Wesley 2009

Converting A Texture Image
OpenGL requires texture dimensions to be powers of 2 If dimensions of image are not powers of 2 gluScaleImage( format, w_in, h_in, type_in, *data_in, w_out, h_out, type_out, *data_out ); data_in is source image data_out is for destination image Image interpolated and filtered during scaling If Angel: Interactive Computer Graphics 45E © Addison-Wesley 2009

Mapping a Texture Based on parametric texture coordinates glTexCoord*() specified at each vertex Texture Space Object Space t 1, 1 (s, t) = (0.2, 0.8) 0, 1 A a c (0.4, 0.2) b B C s (0.8, 0.4) 0, 0 1, 0 Angel: Interactive Computer Graphics 45E © Addison-Wesley 2009

Typical Code glBegin(GL_POLYGON); glColor3f(r0, g0, b0); //if no shading used glNormal3f(u0, v0, w0); // if shading used glTexCoord2f(s0, t0); glVertex3f(x0, y0, z0); glColor3f(r1, g1, b1); glNormal3f(u1, v1, w1); glTexCoord2f(s1, t1); glVertex3f(x1, y1, z1); . glEnd(); Note that we can use vertex arrays to increase efficiency Angel: Interactive Computer Graphics 45E © Addison-Wesley 2009

Interpolation OpenGL uses interpolation to find proper texels from specified texture coordinates Can be distortions texture stretched over trapezoid showing effects of bilinear interpolation good selection of tex coordinates poor selection of tex coordinates Angel: Interactive Computer Graphics 45E © Addison-Wesley 2009

Texture Parameters OpenGL has a variety of parameters that determine how texture is applied Wrapping parameters determine what happens if s and t are outside the (0,1) range Filter modes allow us to use area averaging instead of point samples Mipmapping allows us to use textures at multiple resolutions Environment parameters determine how texture mapping interacts with shading Angel: Interactive Computer Graphics 45E © Addison-Wesley 2009

Wrapping Mode Clamping: if s,t > 1 use 1, if s,t <0 use 0 Wrapping: use s,t modulo 1 glTexParameteri( GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP ) glTexParameteri( GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT ) texture s t GL_CLAMP wrapping GL_REPEAT Angel: Interactive Computer Graphics 45E © Addison-Wesley 2009

Magnification and Minification
More than one texel can cover a pixel (minification) or more than one pixel can cover a texel (magnification) Can use point sampling (nearest texel) or linear filtering ( 2 x 2 filter) to obtain texture values Texture Polygon Magnification Minification Angel: Interactive Computer Graphics 45E © Addison-Wesley 2009

Filter Modes Modes determined by glTexParameteri( target, type, mode ) glTexParameteri(GL_TEXTURE_2D, GL_TEXURE_MAG_FILTER, GL_NEAREST); glTexParameteri(GL_TEXTURE_2D, GL_TEXURE_MIN_FILTER, GL_LINEAR); Note that linear filtering requires a border of an extra texel for filtering at edges (border = 1) Angel: Interactive Computer Graphics 45E © Addison-Wesley 2009

Mipmapped Textures Mipmapping allows for prefiltered texture maps of decreasing resolutions Lessens interpolation errors for smaller textured objects Declare mipmap level during texture definition glTexImage2D( GL_TEXTURE_*D, level, … ) GLU mipmap builder routines will build all the textures from a given image gluBuild*DMipmaps( … ) Angel: Interactive Computer Graphics 45E © Addison-Wesley 2009

Example point sampling linear filtering mipmapped point sampling mipmapped linear filtering Angel: Interactive Computer Graphics 45E © Addison-Wesley 2009

glTexEnv{fi}[v]( GL_TEXTURE_ENV, prop, param )
Texture Functions Controls how texture is applied glTexEnv{fi}[v]( GL_TEXTURE_ENV, prop, param ) GL_TEXTURE_ENV_MODE modes GL_MODULATE: modulates with computed shade GL_BLEND: blends with an environmental color GL_REPLACE: use only texture color GL(GL_TEXTURE_ENV, GL_TEXTURE_ENV_MODE, GL_MODULATE); Set blend color with GL_TEXTURE_ENV_COLOR Angel: Interactive Computer Graphics 45E © Addison-Wesley 2009

Perspective Correction Hint
Texture coordinate and color interpolation either linearly in screen space or using depth/perspective values (slower) Noticeable for polygons “on edge” glHint( GL_PERSPECTIVE_CORRECTION_HINT, hint ) where hint is one of GL_DONT_CARE GL_NICEST GL_FASTEST Angel: Interactive Computer Graphics 45E © Addison-Wesley 2009

Generating Texture Coordinates
OpenGL can generate texture coordinates automatically glTexGen{ifd}[v]() specify a plane generate texture coordinates based upon distance from the plane generation modes GL_OBJECT_LINEAR GL_EYE_LINEAR GL_SPHERE_MAP (used for environmental maps) Angel: Interactive Computer Graphics 45E © Addison-Wesley 2009

Texture Objects Texture is part of the OpenGL state If we have different textures for different objects, OpenGL will be moving large amounts data from processor memory to texture memory Recent versions of OpenGL have texture objects one image per texture object Texture memory can hold multiple texture objects Angel: Interactive Computer Graphics 45E © Addison-Wesley 2009

Applying Textures II specify textures in texture objects set texture filter set texture function set texture wrap mode set optional perspective correction hint bind texture object enable texturing supply texture coordinates for vertex coordinates can also be generated Angel: Interactive Computer Graphics 45E © Addison-Wesley 2009

Other Texture Features
Environment Maps Start with image of environment through a wide angle lens Can be either a real scanned image or an image created in OpenGL Use this texture to generate a spherical map Use automatic texture coordinate generation Multitexturing Apply a sequence of textures through cascaded texture units Angel: Interactive Computer Graphics 45E © Addison-Wesley 2009

Compositing and Blending
Ed Angel Professor of Computer Science, Electrical and Computer Engineering, and Media Arts University of New Mexico

Objectives Learn to use the A component in RGBA color for Blending for translucent surfaces Compositing images Antialiasing Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Opacity and Transparency
Opaque surfaces permit no light to pass through Transparent surfaces permit all light to pass Translucent surfaces pass some light translucency = 1 – opacity (a) opaque surface a =1 Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Physical Models Dealing with translucency in a physically correct manner is difficult due to the complexity of the internal interactions of light and matter Using a pipeline renderer Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Writing Model Use A component of RGBA (or RGBa) color to store opacity During rendering we can expand our writing model to use RGBA values blend source blending factor destination component source component destination blending factor Color Buffer Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Blending Equation We can define source and destination blending factors for each RGBA component s = [sr, sg, sb, sa] d = [dr, dg, db, da] Suppose that the source and destination colors are b = [br, bg, bb, ba] c = [cr, cg, cb, ca] Blend as c’ = [br sr+ cr dr, bg sg+ cg dg , bb sb+ cb db , ba sa+ ca da ] Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

OpenGL Blending and Compositing
Must enable blending and pick source and destination factors glEnable(GL_BLEND) glBlendFunc(source_factor, destination_factor) Only certain factors supported GL_ZERO, GL_ONE GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA GL_DST_ALPHA, GL_ONE_MINUS_DST_ALPHA See Redbook for complete list Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Example Suppose that we start with the opaque background color (R0,G0,B0,1) This color becomes the initial destination color We now want to blend in a translucent polygon with color (R1,G1,B1,a1) Select GL_SRC_ALPHA and GL_ONE_MINUS_SRC_ALPHA as the source and destination blending factors R’1 = a1 R1 +(1- a1) R0, …… Note this formula is correct if polygon is either opaque or transparent Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Clamping and Accuracy All the components (RGBA) are clamped and stay in the range (0,1) However, in a typical system, RGBA values are only stored to 8 bits Can easily loose accuracy if we add many components together Example: add together n images Divide all color components by n to avoid clamping Blend with source factor = 1, destination factor = 1 But division by n loses bits Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Order Dependency Is this image correct? Probably not Polygons are rendered in the order they pass down the pipeline Blending functions are order dependent Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Opaque and Translucent Polygons
Suppose that we have a group of polygons some of which are opaque and some translucent How do we use hidden-surface removal? Opaque polygons block all polygons behind them and affect the depth buffer Translucent polygons should not affect depth buffer Render with glDepthMask(GL_FALSE) which makes depth buffer read-only Sort polygons first to remove order dependency Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Fog We can composite with a fixed color and have the blending factors depend on depth Simulates a fog effect Blend source color Cs and fog color Cf by Cs’=f Cs + (1-f) Cf f is the fog factor Exponential Gaussian Linear (depth cueing) Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Fog Functions Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

OpenGL Fog Functions GLfloat fcolor[4] = {……}: glEnable(GL_FOG); glFogf(GL_FOG_MODE, GL_EXP); glFogf(GL_FOG_DENSITY, 0.5); glFOgv(GL_FOG, fcolor); Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Line Aliasing Ideal raster line is one pixel wide All line segments, other than vertical and horizontal segments, partially cover pixels Simple algorithms color only whole pixels Lead to the “jaggies” or aliasing Similar issue for polygons Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Antialiasing Can try to color a pixel by adding a fraction of its color to the frame buffer Fraction depends on percentage of pixel covered by fragment Fraction depends on whether there is overlap no overlap overlap Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Area Averaging Use average area a1+a2-a1a2 as blending factor Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

OpenGL Antialiasing Can enable separately for points, lines, or polygons glEnable(GL_POINT_SMOOTH); glEnable(GL_LINE_SMOOTH); glEnable(GL_POLYGON_SMOOTH); glEnable(GL_BLEND); glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA); Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Accumulation Buffer Compositing and blending are limited by resolution of the frame buffer Typically 8 bits per color component The accumulation buffer is a high resolution buffer (16 or more bits per component) that avoids this problem Write into it or read from it with a scale factor Slower than direct compositing into the frame buffer Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Applications Compositing Image Filtering (convolution) Whole scene antialiasing Motion effects Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Programmable Pipelines
Ed Angel Professor of Computer Science, Electrical and Computer Engineering, and Media Arts Director, Arts Technology Center University of New Mexico

Objectives Introduce programmable pipelines Vertex shaders Fragment shaders Introduce shading languages Needed to describe shaders RenderMan Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Introduction Recent major advance in real time graphics is programmable pipeline First introduced by NVIDIA GForce 3 Supported by high-end commodity cards NVIDIA, ATI, 3D Labs Software Support Direct X 8 , 9, 10 OpenGL Extensions OpenGL Shading Language (GLSL) Cg Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Background Two components Vertex programs (shaders) Fragment programs (shaders) Requires detailed understanding of two seemingly contradictory apporachs OpenGL pipeline Real time RenderMan ideas offline Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Black Box View fragments fragments vertices vertices Geometry Processor Rasterizer Fragment Processor Frame Buffer CPU Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Geometric Calculations
Geometric data: set of vertices + type Can come from program, evaluator, display list type: point, line, polygon Vertex data can be (x,y,z,w) coordinates of a vertex (glVertex) Normal vector Texture Coordinates RGBA color Other data: color indices, edge flags Additional user-defined data in GLSL Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Per-Vertex Operations
Vertex locations are transformed by the model-view matrix into eye coordinates Normals must be transformed with the inverse transpose of the model-view matrix so that v·n=v’ ·n’ in both spaces Assumes there is no scaling May have to use autonormalization Textures coordinates are generated if autotexture enabled and the texture matrix is applied Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Lighting Calculations
Consider a per-vertex basis Phong model Phong model requires computation of r and v at every vertex I =kd Id l · n + ks Is (v · r )a + ka Ia Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Calculating the Reflection Term
angle of incidence = angle of reflection cos qi = cos qr or r·n = l·n r, n, and l are coplanar r = al + bn normalize 1 = r·r = n·n = l·l solving: r = 2(l · n)n-l Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

OpenGL Lighting Modified Phong model Halfway vector Global ambient term Specified in standard Supported by hardware Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Halfway Vector Blinn proposed replacing v·r by n·h where h = (l+v)/|l + v| (l+v)/2 is halfway between l and v If n, l, and v are coplanar: y = f/2 Must then adjust exponent so that (n·h)e’ ≈ (r.v)e Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Primitive Assembly Vertices are next assembled into objects Polygons Line Segements Points Transformation by projection matrix Clipping Against user defined planes View volume, x=±w, y=±w, z=±w Polygon clipping can create new vertices Perspective Division Viewport mapping Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Rasterization Geometric entities are rasterized into fragments Each fragment corresponds to a point on an integer grid: a displayed pixel Hence each fragment is a potential pixel Each fragment has A color Possibly a depth value Texture coordinates Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Fragment Operations Texture generation Fog Antialiasing Scissoring Alpha test Blending Dithering Logical Operation Masking Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Vertex Processor Takes in vertices Position attribute Possibly color OpenGL state Produces Position in clip coordinates Vertex color Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Fragment Processor Takes in output of rasterizer (fragments) Vertex values have been interpolated over primitive by rasterizer Outputs a fragment Color Texture Fragments still go through fragment tests Hidden-surface removal alpha Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Programmable Shaders Replace fixed function vertex and fragment processing by programmable processors called shaders Can replace either or both If we use a programmable shader we must do all required functions of the fixed function processor Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Development RenderMan Shading Language Offline rendering Hardware Shading Languages UNC, Stanford NVIDIA OpenGL Vertex Program Extension OpenGL Shading Language Cg OpenGL Microsoft HLSL Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

RenderMan Developed by Pixar S. Upstill, The RenderMan Companion, Addison-Wesley, 1989. Model interface file (RIB) Modeler Renderer Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Modeling vs Rendering Modeler outputs geometric model plus information for the renderer Specifications of camera Materials Lights May have different kinds of renderers Ray tracer Radiosity How do we specify a shader? Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Shading Trees Shaders such as the Phong model can be written as algebraic expressions But expressions can be described by trees Need now operators such as dot and cross products and new data types such as matrices and vectors Environmental variables are part of state I =kd Id l · n + ks Is (v · r )s + ka Ia Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Reflection Vector Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Phong Model Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

GLSL I Ed Angel Professor of Computer Science, Electrical and Computer Engineering, and Media Arts Director, Arts Technology Center University of New Mexico

Objectives Shader applications Vertex shaders Fragment shaders Programming shaders Cg GLSL Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Vertex Shader Applications
Moving vertices Morphing Wave motion Fractals Lighting More realistic models Cartoon shaders Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Fragment Shader Applications
Per fragment lighting calculations per vertex lighting per fragment lighting Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Texture mapping smooth shading environment mapping bump mapping Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Writing Shaders First programmable shaders were programmed in an assembly-like manner OpenGL extensions added for vertex and fragment shaders Cg (C for graphics) C-like language for programming shaders Works with both OpenGL and DirectX Interface to OpenGL complex OpenGL Shading Language (GLSL) Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

GLSL OpenGL Shading Language Part of OpenGL 2.0 High level C-like language New data types Matrices Vectors Samplers OpenGL state available through built-in variables Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Simple Vertex Shader const vec4 red = vec4(1.0, 0.0, 0.0, 1.0); void main(void) { gl_Position = gl_ProjectionMatrix *gl_ModelViewMartrix*gl_Vertex; gl_FrontColor = red; } Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Execution Model Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Simple Fragment Program
void main(void) { gl_FragColor = gl_Color; } Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Execution Model Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Data Types C types: int, float, bool Vectors: float vec2, vec 3, vec4 Also int (ivec) and boolean (bvec) Matrices: mat2, mat3, mat4 Stored by columns Standard referencing m[row][column] C++ style constructors vec3 a =vec3(1.0, 2.0, 3.0) vec2 b = vec2(a) Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Pointers There are no pointers in GLSL We can use C structs which can be copied back from functions Because matrices and vectors are basic types they can be passed into and output from GLSL functions, e.g. matrix3 func(matrix3 a) Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Qualifiers GLSL has many of the same qualifiers such as const as C/C++ Need others due to the nature of the execution model Variables can change Once per primitive Once per vertex Once per fragment At any time in the application Vertex attributes are interpolated by the rasterizer into fragment attributes Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Attribute Qualifier Attribute-qualified variables can change at most once per vertex Cannot be used in fragment shaders Built in (OpenGL state variables) gl_Color gl_ModelViewMatrix User defined (in application program) attribute float temperature attribute vec3 velocity Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Uniform Qualified Variables that are constant for an entire primitive Can be changed in application outside scope of glBegin and glEnd Cannot be changed in shader Used to pass information to shader such as the bounding box of a primitive Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Varying Qualified Variables that are passed from vertex shader to fragment shader Automatically interpolated by the rasterizer Built in Vertex colors Texture coordinates User defined Requires a user defined fragment shader Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Example: Vertex Shader
const vec4 red = vec4(1.0, 0.0, 0.0, 1.0); varying vec3 color_out; void main(void) { gl_Position = gl_ModelViewProjectionMatrix*gl_Vertex; color_out = red; } Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Required Fragment Shader
varying vec3 color_out; void main(void) { gl_FragColor = color_out; } Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Passing values call by value-return Variables are copied in Returned values are copied back Three possibilities in out inout Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Operators and Functions
Standard C functions Trigonometric Arithmetic Normalize, reflect, length Overloading of vector and matrix types mat4 a; vec4 b, c, d; c = b*a; // a column vector stored as a 1d array d = a*b; // a row vector stored as a 1d array Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Swizzling and Selection
Can refer to array elements by element using [] or selection (.) operator with x, y, z, w r, g, b, a s, t, p, q a[2], a.b, a.z, a.p are the same Swizzling operator lets us manipulate components vec4 a; a.yz = vec2(1.0, 2.0); Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

GLSL II Ed Angel Professor of Computer Science, Electrical and Computer Engineering, and Media Arts Director, Arts Technology Center University of New Mexico

Objectives Coupling GLSL to Applications Example applications Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Linking Shaders to OpenGL
OpenGL Extensions ARB_shader_objects ARB_vertex_shader ARB_fragment_shader OpenGL 2.0 Almost identical to using extensions Avoids extension suffixes on function names Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Program Object Container for shaders Can contain multiple shaders Other GLSL functions GLuint myProgObj; myProgObj = glCreateProgram(); /* define shader objects here */ glUseProgram(myProgObj); glLinkProgram(myProgObj); Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Reading a Shader Shader are added to the program object and compiled Usual method of passing a shader is as a null-terminated string using the function glShaderSource If the shader is in a file, we can write a reader to convert the file to a string Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Shader Reader #include <stdio.h> char* readShaderSource(const char* shaderFile) { FILE* fp = fopen(shaderFile, "r"); char* buf; long size; if(fp == NULL) return(NULL); fseek(fp, 0L, SEEK_END); /* end of file */ size = ftell(fp); fseek(fp, )L, SEEK_SET); /* start of file */ Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Shader Reader (cont) buf = (char*) malloc(statBuf.st_size + 1 * sizeof(char)); fread(buf, 1, size, fp); buf[size] = '\0'; /null termination */ fclose(fp); return buf; } Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Adding a Vertex Shader GLint vShader; GLunit myVertexObj; GLchar vShaderfile[] = “my_vertex_shader”; GLchar* vSource = readShaderSource(vShaderFile); glShaderSource(myVertexObj, 1, &vertexShaderFile, NULL); myVertexObj = glCreateShader(GL_VERTEX_SHADER); glCompileShader(myVertexObj); glAttachObject(myProgObj, myVertexObj); Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Vertex Attributes Vertex attributes are named in the shaders Linker forms a table Application can get index from table and tie it to an application variable Similar process for uniform variables Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Vertex Attribute Example
GLint colorAttr; colorAttr = glGetAttribLocation(myProgObj, "myColor"); /* myColor is name in shader */ GLfloat color[4]; glVertexAttrib4fv(colorAttrib, color); /* color is variable in application */ Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Uniform Variable Example
GLint angleParam; angleParam = glGetUniformLocation(myProgObj, "angle"); /* angle defined in shader */ /* my_angle set in application */ GLfloat my_angle; my_angle = 5.0 /* or some other value */ glUniform1f(angleParam, my_angle); Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Vertex Shader Applications
Moving vertices Morphing Wave motion Fractals Lighting More realistic models Cartoon shaders Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Wave Motion Vertex Shader
uniform float time; uniform float xs, zs, // frequencies uniform float h; // height scale void main() { vec4 t =gl_Vertex; t.y = gl_Vertex.y + h*sin(time + xs*gl_Vertex.x) + h*sin(time + zs*gl_Vertex.z); gl_Position = gl_ModelViewProjectionMatrix*t; } Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Particle System uniform vec3 init_vel; uniform float g, m, t; void main() { vec3 object_pos; object_pos.x = gl_Vertex.x + vel.x*t; object_pos.y = gl_Vertex.y + vel.y*t + g/(2.0*m)*t*t; object_pos.z = gl_Vertex.z + vel.z*t; gl_Position = gl_ModelViewProjectionMatrix* vec4(object_pos,1); } Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Modified Phong Vertex Shader I
void main(void) /* modified Phong vertex shader (without distance term) */ { gl_Position = gl_ModelViewProjectionMatrix * gl_Vertex; vec4 ambient, diffuse, specular; vec4 eyePosition = gl_ModelViewMatrix * gl_Vertex; vec4 eyeLightPos = gl_LightSource[0].position; vec3 N = normalize(gl_NormalMatrix * gl_Normal); vec3 L = normalize(eyeLightPos.xyz - eyePosition.xyz); vec3 E = -normalize(eyePosition.xyz); vec3 H = normalize(L + E); Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Modified Phong Vertex Shader II
/* compute diffuse, ambient, and specular contributions */ float Kd = max(dot(L, N), 0.0); float Ks = pow(max(dot(N, H), 0.0), gl_FrontMaterial.shininess); float Ka = 0.0; ambient = Ka*gl_FrontLightProduct[0].ambient; diffuse = Kd*gl_FrontLightProduct[0].diffuse; specular = Ks*gl_FrontLightProduct[0].specular; gl_FrontColor = ambient+diffuse+specular; } Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Pass Through Fragment Shader
void main(void) { gl_FragColor = gl_Color; } Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Vertex Shader for per Fragment Lighting
varying vec3 N, L, E, H; void main() { gl_Position = gl_ModelViewProjectionMatrix * gl_Vertex; vec4 eyePosition = gl_ModelViewMatrix * gl_Vertex; vec4 eyeLightPos = gl_LightSource[0].position; N = normalize(gl_NormalMatrix * gl_Normal); L = normalize(eyeLightPos.xyz - eyePosition.xyz); E = -normalize(eyePosition.xyz); H = normalize(L + E); } Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Fragment Shader for Modified Phong Lighting I
varying vec3 N; varying vec3 L; varying vec3 E; varying vec3 H; void main() { vec3 Normal = normalize(N); vec3 Light = normalize(L); vec3 Eye = normalize(E); vec3 Half = normalize(H); Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Fragment Shader for Modified Phong Lighting II
float Kd = max(dot(Normal, Light), 0.0); float Ks = pow(max(dot(Half, Normal), 0.0), gl_FrontMaterial.shininess); float Ka = 0.0; vec4 diffuse = Kd * gl_FrontLightProduct[0].diffuse; vec4 specular = Ks * gl_FrontLightProduct[0].specular; vec4 ambient = Ka * gl_FrontLightProduct[0].ambient; gl_FragColor = ambient + diffuse + specular; } Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Vertex vs Fragment Lighting
per vertex lighting per fragment lighting Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Samplers Provides access to a texture object Defined for 1, 2, and 3 dimensional textures and for cube maps In shader: uniform sampler2D myTexture; Vec2 texcoord; Vec4 texcolor = texture2D(mytexture, texcoord); In application: texMapLocation = glGetUniformLocation(myProg,“myTexture”); glUniform1i(texMapLocation, 0); /* assigns to texture unit 0 */ Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Texture mapping smooth shading environment mapping bump mapping Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Cube Maps We can form a cube map texture by defining six 2D texture maps that correspond to the sides of a box Supported by OpenGL Also supported in GLSL through cubemap sampler vec4 texColor = textureCube(mycube, texcoord); Texture coordinates must be 3D Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Environment Map Use reflection vector to locate texture in cube map Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Environment Maps with Shaders
Environment map usually computed in world coordinates which can differ from object coordinates because of modeling matrix May have to keep track of modeling matrix and pass it shader as a uniform variable Can also use reflection map or refraction map (for example to simulate water) Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Reflection Map Vertex Shader
varying vec3 R; void main(void) { gl_Position = gl_ModelViewProjectionMatrix*gl_Vertex; vec3 N = normalize(gl_NormalMatrix*gl_Normal); vec4 eyePos = gl_ModelViewMatrix*gl_Vertex; R = reflect(-eyePos.xyz, N); } Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Refelction Map Fragment Shader
varying vec3 R; uniform samplerCube texMap; void main(void) { gl_FragColor = textureCube(texMap, R); } Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Bump Mapping Perturb normal for each fragment Store perturbation as textures Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Normalization Maps Cube maps can be viewed as lookup tables 1-4 dimensional variables Vector from origin is pointer into table Example: store normalized value of vector in the map Same for all points on that vector Use “normalization map” instead of normalization function Lookup replaces sqrt, mults and adds Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Hierarchical Modeling I

Objectives Examine the limitations of linear modeling Symbols and instances Introduce hierarchical models Articulated models Robots Introduce Tree and DAG models Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Instance Transformation
Start with a prototype object (a symbol) Each appearance of the object in the model is an instance Must scale, orient, position Defines instance transformation Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Symbol-Instance Table
Can store a model by assigning a number to each symbol and storing the parameters for the instance transformation Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Relationships in Car Model
Symbol-instance table does not show relationships between parts of model Consider model of car Chassis + 4 identical wheels Two symbols Rate of forward motion determined by rotational speed of wheels Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Structure Through Function Calls
car(speed) { chassis() wheel(right_front); wheel(left_front); wheel(right_rear); wheel(left_rear); } Fails to show relationships well Look at problem using a graph Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Graphs Set of nodes and edges (links) Edge connects a pair of nodes Directed or undirected Cycle: directed path that is a loop loop Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Tree Graph in which each node (except the root) has exactly one parent node May have multiple children Leaf or terminal node: no children root node leaf node Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

DAG Model If we use the fact that all the wheels are identical, we get a directed acyclic graph Not much different than dealing with a tree Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Modeling with Trees Must decide what information to place in nodes and what to put in edges Nodes What to draw Pointers to children Edges May have information on incremental changes to transformation matrices (can also store in nodes) Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Articulated Models Robot arm is an example of an articulated model Parts connected at joints Can specify state of model by giving all joint angles Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Relationships in Robot Arm
Base rotates independently Single angle determines position Lower arm attached to base Its position depends on rotation of base Must also translate relative to base and rotate about connecting joint Upper arm attached to lower arm Its position depends on both base and lower arm Must translate relative to lower arm and rotate about joint connecting to lower arm Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Required Matrices Rotation of base: Rb Apply M = Rb to base Translate lower arm relative to base: Tlu Rotate lower arm around joint: Rlu Apply M = Rb Tlu Rlu to lower arm Translate upper arm relative to upper arm: Tuu Rotate upper arm around joint: Ruu Apply M = Rb Tlu Rlu Tuu Ruu to upper arm Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

OpenGL Code for Robot robot_arm() { glRotate(theta, 0.0, 1.0, 0.0); base(); glTranslate(0.0, h1, 0.0); glRotate(phi, 0.0, 1.0, 0.0); lower_arm(); glTranslate(0.0, h2, 0.0); glRotate(psi, 0.0, 1.0, 0.0); upper_arm(); } Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Tree Model of Robot Note code shows relationships between parts of model Can change “look” of parts easily without altering relationships Simple example of tree model Want a general node structure for nodes Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Possible Node Structure
Code for drawing part or pointer to drawing function linked list of pointers to children matrix relating node to parent Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Generalizations Need to deal with multiple children How do we represent a more general tree? How do we traverse such a data structure? Animation How to use dynamically? Can we create and delete nodes during execution? Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Hierarchical Modeling II

Objectives Build a tree-structured model of a humanoid figure Examine various traversal strategies Build a generalized tree-model structure that is independent of the particular model Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Building the Model Can build a simple implementation using quadrics: ellipsoids and cylinders Access parts through functions torso() left_upper_arm() Matrices describe position of node with respect to its parent Mlla positions left lower leg with respect to left upper arm Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Display and Traversal The position of the figure is determined by 11 joint angles (two for the head and one for each other part) Display of the tree requires a graph traversal Visit each node once Display function at each node that describes the part associated with the node, applying the correct transformation matrix for position and orientation Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Transformation Matrices
There are 10 relevant matrices M positions and orients entire figure through the torso which is the root node Mh positions head with respect to torso Mlua, Mrua, Mlul, Mrul position arms and legs with respect to torso Mlla, Mrla, Mlll, Mrll position lower parts of limbs with respect to corresponding upper limbs Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Stack-based Traversal
Set model-view matrix to M and draw torso Set model-view matrix to MMh and draw head For left-upper arm need MMlua and so on Rather than recomputing MMlua from scratch or using an inverse matrix, we can use the matrix stack to store M and other matrices as we traverse the tree Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Traversal Code figure() { glPushMatrix() torso(); glRotate3f(…); head(); glPopMatrix(); glPushMatrix(); glTranslate3f(…); left_upper_arm(); save present model-view matrix update model-view matrix for head recover original model-view matrix save it again update model-view matrix for left upper arm recover and save original model-view matrix again rest of code Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Analysis The code describes a particular tree and a particular traversal strategy Can we develop a more general approach? Note that the sample code does not include state changes, such as changes to colors May also want to use glPushAttrib and glPopAttrib to protect against unexpected state changes affecting later parts of the code Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

General Tree Data Structure
Need a data structure to represent tree and an algorithm to traverse the tree We will use a left-child right sibling structure Uses linked lists Each node in data structure is two pointers Left: next node Right: linked list of children Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Left-Child Right-Sibling Tree

Tree node Structure At each node we need to store Pointer to sibling Pointer to child Pointer to a function that draws the object represented by the node Homogeneous coordinate matrix to multiply on the right of the current model-view matrix Represents changes going from parent to node In OpenGL this matrix is a 1D array storing matrix by columns Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

C Definition of treenode
typedef struct treenode { GLfloat m[16]; void (*f)(); struct treenode *sibling; struct treenode *child; } treenode; Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Defining the torso node
treenode torso_node, head_node, lua_node, … ; /* use OpenGL functions to form matrix */ glLoadIdentity(); glRotatef(theta[0], 0.0, 1.0, 0.0); /* move model-view matrix to m */ glGetFloatv(GL_MODELVIEW_MATRIX, torso_node.m) torso_node.f = torso; /* torso() draws torso */ Torso_node.sibling = NULL; Torso_node.child = &head_node; Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Notes The position of figure is determined by 11 joint angles stored in theta[11] Animate by changing the angles and redisplaying We form the required matrices using glRotate and glTranslate More efficient than software Because the matrix is formed in model-view matrix, we may want to first push original model-view matrix on matrix stack Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Preorder Traversal void traverse(treenode *root) { if(root == NULL) return; glPushMatrix(); glMultMatrix(root->m); root->f(); if(root->child != NULL) traverse(root->child); glPopMatrix(); if(root->sibling != NULL) traverse(root->sibling); } Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Notes We must save model-view matrix before multiplying it by node matrix Updated matrix applies to children of node but not to siblings which contain their own matrices The traversal program applies to any left-child right-sibling tree The particular tree is encoded in the definition of the individual nodes The order of traversal matters because of possible state changes in the functions Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Dynamic Trees If we use pointers, the structure can be dynamic typedef treenode *tree_ptr; tree_ptr torso_ptr; torso_ptr = malloc(sizeof(treenode)); Definition of nodes and traversal are essentially the same as before but we can add and delete nodes during execution Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Graphical Objects and Scene Graphs

Objectives Introduce graphical objects Generalize the notion of objects to include lights, cameras, attributes Introduce scene graphs Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Limitations of Immediate Mode Graphics
When we define a geometric object in an application, upon execution of the code the object is passed through the pipeline It then disappears from the graphical system To redraw the object, either changed or the same, we must reexecute the code Display lists provide only a partial solution to this problem Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

OpenGL and Objects OpenGL lacks an object orientation Consider, for example, a green sphere We can model the sphere with polygons or use OpenGL quadrics Its color is determined by the OpenGL state and is not a property of the object Defies our notion of a physical object We can try to build better objects in code using object-oriented languages/techniques Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Imperative Programming Model
Example: rotate a cube The rotation function must know how the cube is represented Vertex list Edge list cube data Application glRotate results Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Object-Oriented Programming Model
In this model, the representation is stored with the object The application sends a message to the object The object contains functions (methods) which allow it to transform itself Application Cube Object message Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

C/C++ Can try to use C structs to build objects C++ provides better support Use class construct Can hide implementation using public, private, and protected members in a class Can also use friend designation to allow classes to access each other Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Cube Object Suppose that we want to create a simple cube object that we can scale, orient, position and set its color directly through code such as cube mycube; mycube.color[0]=1.0; mycube.color[1]= mycube.color[2]=0.0; mycube.matrix[0][0]=……… Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Cube Object Functions We would also like to have functions that act on the cube such as mycube.translate(1.0, 0.0,0.0); mycube.rotate(theta, 1.0, 0.0, 0.0); setcolor(mycube, 1.0, 0.0, 0.0); We also need a way of displaying the cube mycube.render(); Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Building the Cube Object
class cube { public: float color[3]; float matrix[4][4]; // public methods private: // implementation } Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

The Implementation Can use any implementation in the private part such as a vertex list The private part has access to public members and the implementation of class methods can use any implementation without making it visible Render method is tricky but it will invoke the standard OpenGL drawing functions such as glVertex Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Other Objects Other objects have geometric aspects Cameras Light sources But we should be able to have nongeometric objects too Materials Colors Transformations (matrices) Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Application Code cube mycube; material plastic; mycube.setMaterial(plastic); camera frontView; frontView.position(x ,y, z); Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Light Object class light { // match Phong model public: boolean type; //ortho or perspective boolean near; float position[3]; float orientation[3]; float specular[3]; float diffuse[3]; float ambient[3]; } Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Scene Descriptions If we recall figure model, we saw that We could describe model either by tree or by equivalent code We could write a generic traversal to display If we can represent all the elements of a scene (cameras, lights,materials, geometry) as C++ objects, we should be able to show them in a tree Render scene by traversing this tree Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Preorder Traversal glPushAttrib glPushMatrix glColor glTranslate glRotate Object1 Object2 glPopMatrix glPopAttrib … Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Group Nodes Necessary to isolate state chages Equivalent to OpenGL Push/Pop Note that as with the figure model We can write a universal traversal algorithm The order of traversal can matter If we do not use the group node, state changes can persist Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Inventor and Java3D Inventor and Java3D provide a scene graph API Scene graphs can also be described by a file (text or binary) Implementation independent way of transporting scenes Supported by scene graph APIs However, primitives supported should match capabilities of graphics systems Hence most scene graph APIs are built on top of OpenGL or DirectX (for PCs) Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

VRML Want to have a scene graph that can be used over the World Wide Web Need links to other sites to support distributed data bases Virtual Reality Markup Language Based on Inventor data base Implemented with OpenGL Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Open Scene Graph Supports very complex geometries by adding occulusion culling in first path Supports translucently through a second pass that sorts the geometry First two passes yield a geometry list that is rendered by the pipeline in a third pass Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Particle Systems Ed Angel
Professor of Computer Science, Electrical and Computer Engineering, and Media Arts Director, Arts Technology Center University of New Mexico Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Introduction Most important of procedural methods Used to model Natural phenomena Clouds Terrain Plants Crowd Scenes Real physical processes Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Newtonian Particle Particle system is a set of particles Each particle is an ideal point mass Six degrees of freedom Position Velocity Each particle obeys Newtons’ law f = ma Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Particle Equations pi = (xi, yi zi) vi = dpi /dt = pi‘ = (dxi /dt, dyi /dt , zi /dt) m vi‘= fi Hard part is defining force vector Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Force Vector Independent Particles Gravity Wind forces O(n) calulation Coupled Particles O(n) Meshes Spring-Mass Systems Coupled Particles O(n2) Attractive and repulsive forces Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Solution of Particle Systems
float time, delta state[6n], force[3n]; state = initial_state(); for(time = t0; time<final_time, time+=delta) { force = force_function(state, time); state = ode(force, state, time, delta); render(state, time) } Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Simple Forces Consider force on particle i fi = fi(pi, vi) Gravity fi = g gi = (0, -g, 0) Wind forces Drag pi(t0), vi(t0) Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Meshes Connect each particle to its closest neighbors O(n) force calculation Use spring-mass system Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Spring Forces Assume each particle has unit mass and is connected to its neighbor(s) by a spring Hooke’s law: force proportional to distance (d = ||p – q||) between the points Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Hooke’s Law Let s be the distance when there is no force f = -ks(|d| - s) d/|d| ks is the spring constant d/|d| is a unit vector pointed from p to q Each interior point in mesh has four forces applied to it Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Spring Damping A pure spring-mass will oscillate forever Must add a damping term f = -(ks(|d| - s) + kd d·d/|d|)d/|d| Must project velocity Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Attraction and Repulsion
Inverse square law f = -krd/|d|3 General case requires O(n2) calculation In most problems, the drop off is such that not many particles contribute to the forces on any given particle Sorting problem: is it O(n log n)? Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Boxes Spatial subdivision technique Divide space into boxes Particle can only interact with particles in its box or the neighboring boxes Must update which box a particle belongs to after each time step Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Linked Lists Each particle maintains a linked list of its neighbors Update data structure at each time step Must amortize cost of building the data structures initially Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Particle Field Calculations
Consider simple gravity We don’t compute forces due to sun, moon, and other large bodies Rather we use the gravitational field Usually we can group particles into equivalent point masses Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Solution of ODEs Particle system has 6n ordinary differential equations Write set as du/dt = g(u,t) Solve by approximations using Taylor’s Thm Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Euler’s Method u(t + h) ≈ u(t) + h du/dt = u(t) + hg(u, t) Per step error is O(h2) Require one force evaluation per time step Problem is numerical instability depends on step size Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Improved Euler u(t + h) ≈ u(t) + h/2(g(u, t) + g(u, t+h)) Per step error is O(h3) Also allows for larger step sizes But requires two function evaluations per step Also known as Runge-Kutta method of order 2 Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Contraints Easy in computer graphics to ignore physical reality Surfaces are virtual Must detect collisions separately if we want exact solution Can approximate with repulsive forces Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Collisions Once we detect a collision, we can calculate new path Use coefficient of resititution Reflect vertical component May have to use partial time step Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Curves and Surfaces Ed Angel

Objectives Introduce types of curves and surfaces Explicit Implicit Parametric Strengths and weaknesses Discuss Modeling and Approximations Conditions Stability Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Escaping Flatland Until now we have worked with flat entities such as lines and flat polygons Fit well with graphics hardware Mathematically simple But the world is not composed of flat entities Need curves and curved surfaces May only have need at the application level Implementation can render them approximately with flat primitives Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Modeling with Curves interpolating data point data points approximating curve Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

What Makes a Good Representation?
There are many ways to represent curves and surfaces Want a representation that is Stable Smooth Easy to evaluate Must we interpolate or can we just come close to data? Do we need derivatives? Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Explicit Representation
Most familiar form of curve in 2D y=f(x) Cannot represent all curves Vertical lines Circles Extension to 3D y=f(x), z=g(x) The form z = f(x,y) defines a surface y x y x z Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Implicit Representation
Two dimensional curve(s) g(x,y)=0 Much more robust All lines ax+by+c=0 Circles x2+y2-r2=0 Three dimensions g(x,y,z)=0 defines a surface Intersect two surface to get a curve In general, we cannot solve for points that satisfy Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Algebraic Surface Quadric surface 2  i+j+k At most 10 terms Can solve intersection with a ray by reducing problem to solving quadratic equation Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Parametric Curves Separate equation for each spatial variable x=x(u) y=y(u) z=z(u) For umax  u  umin we trace out a curve in two or three dimensions p(u)=[x(u), y(u), z(u)]T p(u) p(umax) p(umin) Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Selecting Functions Usually we can select “good” functions not unique for a given spatial curve Approximate or interpolate known data Want functions which are easy to evaluate Want functions which are easy to differentiate Computation of normals Connecting pieces (segments) Want functions which are smooth Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Parametric Lines We can normalize u to be over the interval (0,1) Line connecting two points p0 and p1 p(1)= p1 p(u)=(1-u)p0+up1 p(0) = p0 p(1)= p0 +d Ray from p0 in the direction d d p(u)=p0+ud p(0) = p0 Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Parametric Surfaces Surfaces require 2 parameters x=x(u,v) y=y(u,v) z=z(u,v) p(u,v) = [x(u,v), y(u,v), z(u,v)]T Want same properties as curves: Smoothness Differentiability Ease of evaluation y p(u,1) p(0,v) p(1,v) x z p(u,0) Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Normals We can differentiate with respect to u and v to obtain the normal at any point p Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Parametric Planes n point-vector form r p(u,v)=p0+uq+vr n = q x r q p0 n three-point form p2 q = p1 – p0 r = p2 – p0 p1 p0 Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Parametric Sphere x(u,v) = r cos q sin f y(u,v) = r sin q sin f z(u,v) = r cos f 360  q  0 180  f  0 constant: circles of constant longitude f constant: circles of constant latitude differentiate to show n = p Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Curve Segments After normalizing u, each curve is written p(u)=[x(u), y(u), z(u)]T, 1  u  0 In classical numerical methods, we design a single global curve In computer graphics and CAD, it is better to design small connected curve segments join point p(1) = q(0) p(u) q(1) q(u) p(0) Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Parametric Polynomial Curves
If N=M=K, we need to determine 3(N+1) coefficients Equivalently we need 3(N+1) independent conditions Noting that the curves for x, y and z are independent, we can define each independently in an identical manner We will use the form where p can be any of x, y, z Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Why Polynomials Easy to evaluate Continuous and differentiable everywhere Must worry about continuity at join points including continuity of derivatives p(u) q(u) join point p(1) = q(0) but p’(1)  q’(0) Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Cubic Parametric Polynomials
N=M=L=3, gives balance between ease of evaluation and flexibility in design Four coefficients to determine for each of x, y and z Seek four independent conditions for various values of u resulting in 4 equations in 4 unknowns for each of x, y and z Conditions are a mixture of continuity requirements at the join points and conditions for fitting the data Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Cubic Polynomial Surfaces
p(u,v)=[x(u,v), y(u,v), z(u,v)]T where p is any of x, y or z Need 48 coefficients ( 3 independent sets of 16) to determine a surface patch Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Designing Parametric Cubic Curves

Objectives Introduce the types of curves Interpolating Hermite Bezier B-spline Analyze their performance Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Interpolating Curve p1 p3 p0 p2 Given four data (control) points p0 , p1 ,p2 , p3 determine cubic p(u) which passes through them Must find c0 ,c1 ,c2 , c3 Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Interpolation Equations
apply the interpolating conditions at u=0, 1/3, 2/3, 1 p0=p(0)=c0 p1=p(1/3)=c0+(1/3)c1+(1/3)2c2+(1/3)3c2 p2=p(2/3)=c0+(2/3)c1+(2/3)2c2+(2/3)3c2 p3=p(1)=c0+c1+c2+c2 or in matrix form with p = [p0 p1 p2 p3]T p=Ac Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Interpolation Matrix Solving for c we find the interpolation matrix c=MIp Note that MI does not depend on input data and can be used for each segment in x, y, and z Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Interpolating Multiple Segments
use p = [p3 p4 p5 p6]T use p = [p0 p1 p2 p3]T Get continuity at join points but not continuity of derivatives Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Blending Functions Rewriting the equation for p(u) p(u)=uTc=uTMIp = b(u)Tp where b(u) = [b0(u) b1(u) b2(u) b3(u)]T is an array of blending polynomials such that p(u) = b0(u)p0+ b1(u)p1+ b2(u)p2+ b3(u)p3 b0(u) = -4.5(u-1/3)(u-2/3)(u-1) b1(u) = 13.5u (u-2/3)(u-1) b2(u) = -13.5u (u-1/3)(u-1) b3(u) = 4.5u (u-1/3)(u-2/3) Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Blending Functions These functions are not smooth Hence the interpolation polynomial is not smooth Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Interpolating Patch Need 16 conditions to determine the 16 coefficients cij Choose at u,v = 0, 1/3, 2/3, 1 Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Matrix Form Define v = [1 v v2 v3]T C = [cij] P = [pij] p(u,v) = uTCv If we observe that for constant u (v), we obtain interpolating curve in v (u), we can show C=MIPMI p(u,v) = uTMIPMITv Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Blending Patches Each bi(u)bj(v) is a blending patch Shows that we can build and analyze surfaces from our knowledge of curves Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Other Types of Curves and Surfaces
How can we get around the limitations of the interpolating form Lack of smoothness Discontinuous derivatives at join points We have four conditions (for cubics) that we can apply to each segment Use them other than for interpolation Need only come close to the data Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Hermite Form p’(1) p’(0) p(0) p(1) Use two interpolating conditions and two derivative conditions per segment Ensures continuity and first derivative continuity between segments Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Equations Interpolating conditions are the same at ends p(0) = p0 = c0 p(1) = p3 = c0+c1+c2+c3 Differentiating we find p’(u) = c1+2uc2+3u2c3 Evaluating at end points p’(0) = p’0 = c1 p’(1) = p’3 = c1+2c2+3c3 Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Matrix Form Solving, we find c=MHq where MH is the Hermite matrix Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Blending Polynomials p(u) = b(u)Tq Although these functions are smooth, the Hermite form is not used directly in Computer Graphics and CAD because we usually have control points but not derivatives However, the Hermite form is the basis of the Bezier form Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Parametric and Geometric Continuity
We can require the derivatives of x, y,and z to each be continuous at join points (parametric continuity) Alternately, we can only require that the tangents of the resulting curve be continuous (geometry continuity) The latter gives more flexibility as we have need satisfy only two conditions rather than three at each join point Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Example Here the p and q have the same tangents at the ends of the segment but different derivatives Generate different Hermite curves This techniques is used in drawing applications Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Higher Dimensional Approximations
The techniques for both interpolating and Hermite curves can be used with higher dimensional parametric polynomials For interpolating form, the resulting matrix becomes increasingly more ill-conditioned and the resulting curves less smooth and more prone to numerical errors In both cases, there is more work in rendering the resulting polynomial curves and surfaces Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Bezier and Spline Curves and Surfaces

Objectives Introduce the Bezier curves and surfaces Derive the required matrices Introduce the B-spline and compare it to the standard cubic Bezier Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Bezier’s Idea In graphics and CAD, we do not usually have derivative data Bezier suggested using the same 4 data points as with the cubic interpolating curve to approximate the derivatives in the Hermite form Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Approximating Derivatives
p2 located at u=2/3 p1 located at u=1/3 slope p’(1) slope p’(0) p3 p0 u Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Equations Interpolating conditions are the same p(0) = p0 = c0 p(1) = p3 = c0+c1+c2+c3 Approximating derivative conditions p’(0) = 3(p1- p0) = c0 p’(1) = 3(p3- p2) = c1+2c2+3c3 Solve four linear equations for c=MBp Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Blending Functions Note that all zeros are at 0 and 1 which forces the functions to be smooth over (0,1) Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Bernstein Polynomials
The blending functions are a special case of the Bernstein polynomials These polynomials give the blending polynomials for any degree Bezier form All zeros at 0 and 1 For any degree they all sum to 1 They are all between 0 and 1 inside (0,1) Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Convex Hull Property The properties of the Bernstein polynomials ensure that all Bezier curves lie in the convex hull of their control points Hence, even though we do not interpolate all the data, we cannot be too far away p1 p2 convex hull Bezier curve p3 p0 Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Bezier Patches Using same data array P=[pij] as with interpolating form Patch lies in convex hull Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Analysis Although the Bezier form is much better than the interpolating form, we have the derivatives are not continuous at join points Can we do better? Go to higher order Bezier More work Derivative continuity still only approximate Supported by OpenGL Apply different conditions Tricky without letting order increase Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

B-Splines Basis splines: use the data at p=[pi-2 pi-1 pi pi-1]T to define curve only between pi-1 and pi Allows us to apply more continuity conditions to each segment For cubics, we can have continuity of function, first and second derivatives at join points Cost is 3 times as much work for curves Add one new point each time rather than three For surfaces, we do 9 times as much work Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Splines and Basis If we examine the cubic B-spline from the perspective of each control (data) point, each interior point contributes (through the blending functions) to four segments We can rewrite p(u) in terms of the data points as defining the basis functions {Bi(u)} Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Generalizing Splines We can extend to splines of any degree Data and conditions to not have to given at equally spaced values (the knots) Nonuniform and uniform splines Can have repeated knots Can force spline to interpolate points Cox-deBoor recursion gives method of evaluation Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

NURBS Nonuniform Rational B-Spline curves and surfaces add a fourth variable w to x,y,z Can interpret as weight to give more importance to some control data Can also interpret as moving to homogeneous coordinate Requires a perspective division NURBS act correctly for perspective viewing Quadrics are a special case of NURBS Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Rendering Curves and Surfaces

Objectives Introduce methods to draw curves Approximate with lines Finite Differences Derive the recursive method for evaluation of Bezier curves and surfaces Learn how to convert all polynomial data to data for Bezier polynomials Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Evaluating Polynomials
Simplest method to render a polynomial curve is to evaluate the polynomial at many points and form an approximating polyline For surfaces we can form an approximating mesh of triangles or quadrilaterals Use Horner’s method to evaluate polynomials p(u)=c0+u(c1+u(c2+uc3)) 3 multiplications/evaluation for cubic Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Finite Differences For equally spaced {uk} we define finite differences For a polynomial of degree n, the nth finite difference is constant Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Finding the Next Values
Starting at the bottom, we can work up generating new values for the polynomial Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

deCasteljau Recursion
We can use the convex hull property of Bezier curves to obtain an efficient recursive method that does not require any function evaluations Uses only the values at the control points Based on the idea that “any polynomial and any part of a polynomial is a Bezier polynomial for properly chosen control data” Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Splitting a Cubic Bezier
p0, p1 , p2 , p3 determine a cubic Bezier polynomial and its convex hull Consider left half l(u) and right half r(u) Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

l(u) and r(u) Since l(u) and r(u) are Bezier curves, we should be able to find two sets of control points {l0, l1, l2, l3} and {r0, r1, r2, r3} that determine them Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Convex Hulls {l0, l1, l2, l3} and {r0, r1, r2, r3}each have a convex hull that that is closer to p(u) than the convex hull of {p0, p1, p2, p3} This is known as the variation diminishing property. The polyline from l0 to l3 (= r0) to r3 is an approximation to p(u). Repeating recursively we get better approximations. Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Equations Start with Bezier equations p(u)=uTMBp l(u) must interpolate p(0) and p(1/2) l(0) = l0 = p0 l(1) = l3 = p(1/2) = 1/8( p0 +3 p1 +3 p2 + p3 ) Matching slopes, taking into account that l(u) and r(u) only go over half the distance as p(u) l’(0) = 3(l1 - l0) = p’(0) = 3/2(p1 - p0 ) l’(1) = 3(l3 – l2) = p’(1/2) = 3/8(- p0 - p1+ p2 + p3) Symmetric equations hold for r(u) Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Efficient Form l0 = p0 r3 = p3 l1 = ½(p0 + p1) r1 = ½(p2 + p3) l2 = ½(l1 + ½( p1 + p2)) r1 = ½(r2 + ½( p1 + p2)) l3 = r0 = ½(l2 + r1) Requires only shifts and adds! Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Every Curve is a Bezier Curve
We can render a given polynomial using the recursive method if we find control points for its representation as a Bezier curve Suppose that p(u) is given as an interpolating curve with control points q There exist Bezier control points p such that Equating and solving, we find p=MB-1MI p(u)=uTMIq p(u)=uTMBp Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Example These three curves were all generated from the same original data using Bezier recursion by converting all control point data to Bezier control points Bezier B Spline Interpolating Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Surfaces Can apply the recursive method to surfaces if we recall that for a Bezier patch curves of constant u (or v) are Bezier curves in u (or v) First subdivide in u Process creates new points Some of the original points are discarded original and discarded original and kept new Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Second Subdivision 16 final points for 1 of 4 patches created Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Normals For rendering we need the normals if we want to shade Can compute from parametric equations Can use vertices of corner points to determine OpenGL can compute automatically Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Utah Teapot Most famous data set in computer graphics Widely available as a list of 306 3D vertices and the indices that define 32 Bezier patches Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Quadrics Any quadric can be written as the quadratic form pTAp+bTp+c=0 where p=[x, y, z]T with A, b and c giving the coefficients Render by ray casting Intersect with parametric ray p(a)=p0+ad that passes through a pixel Yields a scalar quadratic equation No solution: ray misses quadric One solution: ray tangent to quadric Two solutions: entry and exit points Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Curves and Surfaces in OpenGL

Objectives Introduce OpenGL evaluators Learn to render polynomial curves and surfaces Discuss quadrics in OpenGL GLUT Quadrics GLU Quadrics Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

What Does OpenGL Support?
Evaluators: a general mechanism for working with the Bernstein polynomials Can use any degree polynomials Can use in 1-4 dimensions Automatic generation of normals and texture coordinates NURBS supported in GLU Quadrics GLU and GLUT contain polynomial approximations of quadrics Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

One-Dimensional Evaluators
Evaluate a Bernstein polynomial of any degree at a set of specified values Can evaluate a variety of variables Points along a 2, 3 or 4 dimensional curve Colors Normals Texture Coordinates We can set up multiple evaluators that are all evaluated for the same value Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Setting Up an Evaluator
what we want to evaluate max and min of u glMap1f(type,u_min,u_max,stride, order, pointer_to_array) separation between data points 1+degree of polynomial pointer to control data Each type must be enabled by glEnable(type) Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Example Consider an evaluator for a cubic Bezier curve over (0,1) point data[ ]={…………..}; * /3d data /* glMap1f(GL_MAP_VERTEX_3,0.0,1.0,3,4,data); cubic data are 3D vertices data are arranged as x,y,z,x,y,z…… three floats between data points in array glEnable(GL_MAP_VERTEX_3); Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Evaluating The function glEvalCoord1f(u) causes all enabled evaluators to be evaluated for the specified u Can replace glVertex, glNormal, glTexCoord The values of u need not be equally spaced Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Example Consider the previous evaluator that was set up for a cubic Bezier over (0,1) Suppose that we want to approximate the curve with a 100 point polyline glBegin(GL_LINE_STRIP) for(i=0; i<100; i++) glEvalCoord1f( (float) i/100.0); glEnd(); Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Equally Spaced Points Rather than use a loop, we can set up an equally spaced mesh (grid) and then evaluate it with one function call glMapGrid(100, 0.0, 1.0); sets up 100 equally-spaced points on (0,1) glEvalMesh1(GL_LINE, 0, 99); renders lines between adjacent evaluated points from point 0 to point 99 Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Bezier Surfaces Similar procedure to 1D but use 2D evaluators in u and v Set up with glMap2f(type, u_min, umax, u_stride, u_order, v_min, v_max, v_stride, v_order, pointer_to_data) Evaluate with glEvalCoord2f(u,v) Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Example bicubic over (0,1) x (0,1) point data[4][4]={………}; glMap2f(GL_MAP_VERTEX_3, 0.0, 1.0, 3, 4, 0.0, 1.0, 12, 4, data); Note that in v direction data points are separated by 12 floats since array data is stored by rows Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Rendering with Lines must draw in both directions for(j=0;j<100;j++) { glBegin(GL_LINE_STRIP); for(i=0;i<100;i++) glEvalCoord2f((float) i/100.0, (float) j/100.0); glEnd(); glEvalCoord2f((float) j/100.0, (float) i/100.0); } Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Rendering with Quadrilaterals
We can form a quad mesh and render with lines for(j=0; j<99; j++) { glBegin(GL_QUAD_STRIP); for(i=0; i<100; i++) { glEvalCoord2f ((float) i/100.0, (float) j/100.0); glEvalCoord2f ((float)(i+1)/100.0, (float)j/100.0); } glEnd(): Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Uniform Meshes We can form a 2D mesh (grid) in a similar manner to 1D for uniform spacing glMapGrid2(u_num, u_min, u_max, v_num, v_min, v_max) Can evaluate as before with lines or if want filled polygons glEvalMesh2( GL_FILL, u_start, u_num, v_start, v_num) Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Rendering with Lighting
If we use filled polygons, we have to shade or we will see solid color uniform rendering Can specify lights and materials but we need normals Let OpenGL find them glEnable(GL_AUTO_NORMAL); Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

NURBS OpenGL supports NURBS surfaces through the GLU library Why GLU? Can use evaluators in 4D with standard OpenGL library However, there are many complexities with NURBS that need a lot of code There are five NURBS surface functions plus functions for trimming curves that can remove pieces of a NURBS surface Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Quadrics Quadrics are in both the GLU and GLUT libraries Both use polygonal approximations where the application specifies the resolution Sphere: lines of longitude and lattitude GLU: disks, cylinders, spheres Can apply transformations to scale, orient, and position GLUT: Platonic solids, torus, Utah teapot, cone Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

GLUT Objects Each has a wire and a solid form glutWireCone() glutWireTorus() glutWireTeapot() Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

GLUT Platonic Solids glutWireTetrahedron() glutWireDodecahedron() glutWireOctahedron() glutWireIcosahedron() Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Quadric Objects in GLU GLU can automatically generate normals and texture coordinates Quadrics are objects that include properties such as how we would like the object to be rendered partial disk disk sphere Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Defining a Cylinder GLUquadricOBJ *p; P = gluNewQuadric(); /*set up object */ gluQuadricDrawStyle(GLU_LINE);/*render style*/ gluCylinder(p, BASE_RADIUS, TOP_RADIUS, BASE_HEIGHT, sections, slices); Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Ray Tracing Ed Angel Professor of Computer Science, Electrical and Computer Engineering, and Media Arts Director, Arts Technology Center University of New Mexico Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Introduction OpenGL is based on a pipeline model in which primitives are rendered one at time No shadows (except by tricks or multiple renderings) No multiple reflections Global approaches Rendering equation Ray tracing Radiosity Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Ray Tracing Follow rays of light from a point source Can account for reflection and transmission Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Computation Should be able to handle all physical interactions Ray tracing paradigm is not computational Most rays do not affect what we see Scattering produces many (infinite) additional rays Alternative: ray casting Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Ray Casting Only rays that reach the eye matter Reverse direction and cast rays Need at least one ray per pixel Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Ray Casting Quadrics Ray casting has become the standard way to visualize quadrics which are implicit surfaces in CSG systems Constructive Solid Geometry Primitives are solids Build objects with set operations Union, intersection, set difference Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Ray Casting a Sphere Ray is parametric Sphere is quadric Resulting equation is a scalar quadratic equation which gives entry and exit points of ray (or no solution if ray misses) Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Shadow Rays Even if a point is visible, it will not be lit unless we can see a light source from that point Cast shadow or feeler rays Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Reflection Must follow shadow rays off reflecting or transmitting surfaces Process is recursive Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Reflection and Transmission

Diffuse Surfaces Theoretically the scattering at each point of intersection generates an infinite number of new rays that should be traced In practice, we only trace the transmitted and reflected rays but use the Phong model to compute shade at point of intersection Radiosity works best for perfectly diffuse (Lambertian) surfaces Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Building a Ray Tracer Best expressed recursively Can remove recursion later Image based approach For each ray ……. Find intersection with closest surface Need whole object database available Complexity of calculation limits object types Compute lighting at surface Trace reflected and transmitted rays Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

When to stop Some light will be absorbed at each intersection Track amount left Ignore rays that go off to infinity Put large sphere around problem Count steps Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Recursive Ray Tracer color c = trace(point p, vector d, int step) { color local, reflected, transmitted; point q; normal n; if(step > max) return(background_color); Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Recursive Ray Tracer q = intersect(p, d, status); if(status==light_source) return(light_source_color); if(status==no_intersection) return(background_color); n = normal(q); r = reflect(q, n); t = transmit(q,n); Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Recursive Ray Tracer local = phong(q, n, r); reflected = trace(q, r, step+1); transmitted = trace(q,t, step+1); return(local+reflected+ transmitted); Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Computing Intersections
Implicit Objects Quadrics Planes Polyhedra Parametric Surfaces Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Implicit Surfaces Ray from p0 in direction d p(t) = p0 +t d General implicit surface f(p) = 0 Solve scalar equation f(p(t)) = 0 General case requires numerical methods Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Quadrics General quadric can be written as pTAp + bTp +c = 0 Substitute equation of ray p(t) = p0 +t d to get quadratic equation Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Sphere (p – pc) • (p – pc) – r2 = 0 p(t) = p0 +t d p0 • p0 t2+ 2 p0 • (d – p0) t + (d – p0) • (d – p0) – r2 = 0 Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Planes p • n + c = 0 p(t) = p0 +t d t = -(p0 • n + c)/ d • n Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Polyhedra Generally we want to intersect with closed objects such as polygons and polyhedra rather than planes Hence we have to worry about inside/outside testing For convex objects such as polyhedra there are some fast tests Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Ray Tracing Polyhedra If ray enters an object, it must enter a front facing polygon and leave a back facing polygon Polyhedron is formed by intersection of planes Ray enters at furthest intersection with front facing planes Ray leaves at closest intersection with back facing planes If entry is further away than exit, ray must miss the polyhedron Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Radisoity Ed Angel Professor of Computer Science, Electrical and Computer Engineering, and Media Arts Director, Arts Technology Center University of New Mexico Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Introduction Ray tracing is best with many highly specular sufaces Not characteristic of real scenes Rendering equation describes general shading problem Radiosity solves rendering equation for perfectly diffuse surfaces Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Terminology Energy ~ light (incident, transmitted) Must be conserved Energy flux = luminous flux = power = energy/unit time Measured in lumens Depends on wavelength so we can integrate over spectrum using luminous efficiency curve of sensor Energy density (Φ) = energy flux/unit area Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Terminology Intensity ~ brightness Brightness is perceptual = flux/area-solid angle = power/unit projected area per solid angle Measured in candela Φ = ∫ ∫ I dA dω Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Rendering Eqn (Kajiya)
Consider a point on a surface N Iin(Φin) Iout(Φout) Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Rendering Equation Outgoing light is from two sources Emission Reflection of incoming light Must integrate over all incoming light Integrate over hemisphere Must account for foreshortening of incoming light Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Rendering Equation Iout(Φout) = E(Φout) + ∫ 2πRbd(Φout, Φin )Iin(Φin) cos θ dω emission angle between normal and Φin bidirectional reflection coefficient Note that angle is really two angles in 3D and wavelength is fixed Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Rendering Equation Rendering equation is an energy balance Energy in = energy out Integrate over hemisphere Fredholm integral equation Cannot be solved analytically in general Various approximations of Rbd give standard rendering models Should also add an occlusion term in front of right side to account for other objects blocking light from reaching surface Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Another version Consider light at a point p arriving from p’ i(p, p’) = υ(p, p’)(ε(p,p’)+ ∫ ρ(p, p’, p’’)i(p’, p’’)dp’’ emission from p’ to p occlusion = 0 or 1/d2 light reflected at p’ from all points p’’ towards p Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Radiosity Consider objects to be broken up into flat patches (which may correspond to the polygons in the model) Assume that patches are perfectly diffuse reflectors Radiosity = flux = energy/unit area/ unit time leaving patch Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Notation n patches numbered 1 to n bi = radiosity of patch I ai = area patch I total intensity leaving patch i = bi ai ei ai = emitted intensity from patch I ρi = reflectivity of patch I fij = form factor = fraction of energy leaving patch j that reaches patch i Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Radiosity Equation energy balance biai = eiai + ρi ∑ fjibjaj reciprocity fijai = fjiaj radiosity equation bi = ei + ρi ∑ fijbj Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Matrix Form b = [bi] e = [ei] R = [rij] rij = ρi if i ≠ j rii = 0 F = [fij] Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Matrix Form b = e - RFb formal solution b = [I-RF]-1e Not useful since n is usually very large Alternative: use observation that F is sparse We will consider determination of form factors later Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Solving the Radiosity Equation
For sparse matrices, iterative methods usually require only O(n) operations per iteration Jacobi’s method bk+1 = e - RFbk Gauss-Seidel: use immediate updates Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Series Approximation 1/(1-x) = 1 + x + x2+ …… [I-RF]-1 = I + RF +(RF)2+… b = [I-RF]-1e = e + RFe + (RF)2e +… Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Form Factor Integral fij = (1/ai) ∫ai ∫ai (oij cos θi cos θj / πr2 )dai daj occlusion foreshortening of patch j foreshortening of patch i Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Solving the Intergral There are very few cases where the integral has a (simple) closed form solution Occlusion further complicates solution Alternative is to use numerical methods Two step process similar to texture mapping Hemisphere Hemicube Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Hemisphere Use illuminating hemisphere Center hemisphere on patch with normal pointing up Must shift hemisphere for each point on patch Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Hemicube Easier to use a hemicube instead of a hemisphere Rule each side into “pixels” Easier to project on pixels which give delta form factors that can be added up to give desired from factor To get a delta form factor we need only cast a ray through each pixel Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Instant Radiosity Want to use graphics system if possible Suppose we make one patch emissive The light from this patch is distributed among the other patches Shade of other patches ~ form factors Must use multiple OpenGL point sources to approximate a uniformly emissive patch Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Parallel Rendering Ed Angel
Professor of Computer Science, Electrical and Computer Engineering, and Media Arts Director, Arts Technology Center University of New Mexico Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Introduction In many situations, a standard rendering pipeline might not be sufficient Need higher resolution display More primitives than one pipeline can handle Want to use commodity components to build a system that can render in parallel Use standard network to connect Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Power Walls Where do we display large data sets? CRTs have low resolution (1 Mpixel) LCD panels improving but still expensive Need resolution comparable to data set to see detail CT/MRI/MEG Ocean data Solution? Multiple projectors Commodity High-end See IEECE CG & A (July) Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

CS Power Wall 6 dual processor Intellestations G Force 3 Graphics cards 6 commodity projectors (1024 x 768) Gigabit ethernet Back projected screen Shared facility with scalable system group Investigate OS and network issues Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Power Wall Inexpensive solution but there are some problems Color matching Vignetting Alignment Overlap areas Synching Dark field Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Graphics Architectures
Pipeline Architecture SGI Geometry Engine Geometry passes through pipeline Hardware for clipping transformations texture mapping Transform Clip Rasterize Screen Project/Sort Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Building Blocks Graphics processors consist of geometric blocks and rasterizers Geometric units: transformations, clipping, lighting Rasterization: scan conversion, shading Parallelize by using mutiple blocks Where to do depth check? R G Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Sorting Paradigm We can categorize different ways of interconnecting blocks using a sorting paradigm: each projector is responsible for one area of the screen. Hence, we must sort the primitives and assign them to the proper projector Algorithms can be categorized by where this sorting occurs Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Three Rendering Methods
Sort G R G R G Sort R Composite Sort-First Rendering Sort-Middle Rendering Sort-Last Rendering Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Sort First Each rasterization unit assigned to an area of the screen Each geometric unit coupled to its own rasterizer Must sort primitives first Can use commodity cards Sort R G Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Sort-First Rendering for a Random Triangles Application

Sort Middle Geometric units and rasterization units decoupled Each geometric unit can be assigned any group of objects Each rasterizer is assigned to an area of the screen Must sort between stages G Sort R Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Sort Last Couple rasterizers and geometric units Assign objects to geometric units to load balance or via application Composite results at end R G Composite Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Tree Compositing Composite in pairs Send color and depth buffers Each time half processors become idle Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Binary Swap Compositing
Each processor responsible for one part of display Pass data to right n times Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Sort-Last Rendering for a Random Triangles Application

Comparison Sort first Appealing but hard to implement Sort middle Used in hardware pipelines More difficult to implement with add-on commodity cards Sort last Easy to implement with a compositing stage High network traffic Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Mapping to Clusters Different architectures Shared vs distributed memory Communication overhead Parallel vs distributed algorithms Easy to do sort last Must evaluate communication cost Standard visualization strategies are incorrect if transparency used Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Vista Azul Experimental architecture from IBM donated to AHPCC Half Intel nodes, half AIX nodes Only one (PCI) graphics card per four processors Contained a Scalable Graphics Engine (SGE): high speed-high resolution color buffer that is accessible by all processors Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Comparison Between Sort-First and Sort-Last

Performance on a PC Cluster
Following experiments were done by Ye Cong on the CS cluster 6 Intellestations Gigabit Ethernet GForce 3 graphics Show the effect of network Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Sort-First vs Sort Last Random Triangles

Sort First vs Sort Last Teapot

Azul vs Intellistations

Software for Parallel Rendering
Write your own sort-first sort-last WireGL/Chromium (Stanford) Embed inside package (VTK) Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

WireGL: A Distributed Graphics System
A software-based parallel rendering system that unifies the rendering power of a collection of cluster nodes Scalability is achieved by integrating parallel applications into its sort-first parallel renders Each node in the cluster can be either a rendering client or a rendering server Clients submit OpenGL commands concurrently to servers, which render the final physical image Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Chromium Successor toWireGL Allows both sort first and sort last rendering Implemented on CS cluster Most of gain in performance is bacause Chromium and WireGL can group state-changing commands separately from rendering commands Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Introduction to Computer Graphics

Similar presentations

Presentation on theme: "Introduction to Computer Graphics"— Presentation transcript:

Similar presentations

About project

Feedback

Log in

Auth with social network:

Introduction to Computer Graphics

Similar presentations

Presentation on theme: "Introduction to Computer Graphics"— Presentation transcript:

Similar presentations

About project

Feedback