* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Download S2K Arial, Bold, 37 points, 105% line spacing
Solid modeling wikipedia , lookup
Stereo photography techniques wikipedia , lookup
3D television wikipedia , lookup
Color vision wikipedia , lookup
Image editing wikipedia , lookup
Subpixel rendering wikipedia , lookup
Anaglyph 3D wikipedia , lookup
List of 8-bit computer hardware palettes wikipedia , lookup
Waveform graphics wikipedia , lookup
Color Graphics Adapter wikipedia , lookup
Spatial anti-aliasing wikipedia , lookup
Molecular graphics wikipedia , lookup
Tektronix 4010 wikipedia , lookup
Stereo display wikipedia , lookup
Indexed color wikipedia , lookup
Graphics processing unit wikipedia , lookup
Apple II graphics wikipedia , lookup
Stereoscopy wikipedia , lookup
Framebuffer wikipedia , lookup
BSAVE (bitmap format) wikipedia , lookup
Hold-And-Modify wikipedia , lookup
InfiniteReality wikipedia , lookup
Rendering (computer graphics) wikipedia , lookup
Teaching a Graphics Class with OpenGL: Two Approaches Ed Angel University of New Mexico F.S. Hill University of Massachusetts Who are we? • Ed Angel: Presidential Teaching Fellow, UNM, author of Interactive Computer Graphics (Second Edition) • Sandy Hill, UMass, NTU. Author of Computer Graphics with OpenGL Why are we doing this? • OpenGL is the dominant graphics API • Supported on almost all architectures • Makes it easy to teach a programming-oriented class • We believe OpenGL based classes are better but there are multiple approaches • Many (potential) instructors have little or no experience with OpenGL What can we do in two hours? • Try to convince you why our approaches • • • • should be considered Intro to OpenGL Look at two different courses that use OpenGL Identify resources Future trends Outline • • • • • OpenGL basics Angel’s Approach Hill’s Approach Demo code/assignments Question/answer/discussion Approaches to teaching CG • • • • Bottom Up Survey Top Down Really Top Down Kemeny’s Argument • You don’t need to know what’s under the hood to be literate, but unless you know how to program, you’ll be sitting in the back seat instead of driving. • Bottom up = study the engine • Survey = hire a chauffeur • Top Down = learn to drive What is important? • • • • • • Three dimensional concepts Light-material interactions Transformations Modeling Interaction Rendering/ Algorithms What Is OpenGL? • Graphics rendering API • high-quality color images composed of geometric and image primitives • window system independent • operating system independent • close to hardware • leads to discussions of algorithms and implementation Simple Demo • This demo shows OpenGL capabilities • Created for SIGGRAPH tutorial • Could be written by student by end of semester • Demonstrates • • • • lighting material properties texture mapping interaction (via GLUT) Physical Approaches to Rendering • Ray tracing • • • • Close to physics for simple models Easy to teach Easy to start with Limited • Radiosity • Closer to rendering equation • Not suitable for real time graphics • Not suitable for teaching first class Pipeline Model • Close to hardware • Easy to program • Direct implementation of synthetic camera • Image formation by computer is analogous to image formation by camera (or human) • Specify viewer, objects, lights • Let hardware/software form image (via projection) OpenGL Geometric Pipeline State Application Program ModelView Transformation Vertices Projection Rasterization Frame Buffer Pixels OpenGL Architecture Polynomial Evaluator CPU Display List Per Vertex Operations & Primitive Assembly Rasterization Texture Memory Pixel Operations Per Fragment Operations Frame Buffer OpenGL as a Renderer • Geometric primitives • points, lines and polygons • Image Primitives • images and bitmaps • separate pipeline for images and geometry • linked through texture mapping • Rendering depends on state • colors, materials, light sources, etc. OpenGL and the Windowing System • OpenGL is concerned only with rendering • Window system independent • No input functions • OpenGL must interact with underlying OS and windowing system • Need minimal interface which may be system dependent • Done through additional libraries: AGL, GLX, WGL GLU and GLUT • GLU (OpenGL Utility Library) • part of OpenGL • NURBS, tessellators, quadric shapes, etc. • GLUT (OpenGL Utility Toolkit) • portable windowing API • not officially part of OpenGL OpenGL and Related APIs application program OpenGL Motif widget or similar GLX, AGL or WGL X, Win32, Mac O/S GLUT GLU GL software and/or hardware Preliminaries • Headers Files • #include <GL/gl.h> • #include <GL/glu.h> • #include <GL/glut.h> • Libraries • Enumerated Types • OpenGL defines numerous types for compatibility – GLfloat, GLint, GLenum, etc. GLUT Basics • Application Structure • Configure and open window • Initialize OpenGL state • Register input callback functions • render • resize • input: keyboard, mouse, etc. • Enter event processing loop Sample Program void main( int argc, char** argv ) { int mode = GLUT_RGB|GLUT_DOUBLE; glutInitDisplayMode( mode ); glutCreateWindow( argv[0] ); init(); glutDisplayFunc( display ); glutReshapeFunc( resize ); glutKeyboardFunc( key ); glutIdleFunc( idle ); glutMainLoop(); } OpenGL Initialization • Set up whatever state you’re going to use void init( void ) { glClearColor( 0.0, 0.0, 0.0, 1.0 ); glClearDepth( 1.0 ); glEnable( GL_LIGHT0 ); glEnable( GL_LIGHTING ); glEnable( GL_DEPTH_TEST ); } GLUT Callback Functions • Routine to call when something happens • window resize or redraw • user input • animation • “Register” callbacks with GLUT glutDisplayFunc( display ); glutIdleFunc( idle ); glutKeyboardFunc( keyboard ); Rendering Callback • Do all of your drawing here glutDisplayFunc( display ); void display( void ) { glClear( GL_COLOR_BUFFER_BIT ); glBegin( GL_TRIANGLE_STRIP ); glVertex3fv( v[0] ); glVertex3fv( v[1] ); glVertex3fv( v[2] ); glVertex3fv( v[3] ); glEnd(); glutSwapBuffers(); } Idle Callbacks • Use for animation and continuous update glutIdleFunc( idle ); void idle( void ) { t += dt; glutPostRedisplay(); } User Input Callbacks • Process user input glutKeyboardFunc( keyboard ); void keyboard( char key, int x, int y ) { switch( key ) { case ‘q’ : case ‘Q’ : exit( EXIT_SUCCESS ); break; case ‘r’ : case ‘R’ : rotate = GL_TRUE; break; } } Elementary Rendering • Geometric Primitives • Managing OpenGL State • OpenGL Buffers OpenGL Geometric Primitives • All geometric primitives are specified by vertices GL_LINES GL_LINE_STRIP GL_POINTS GL_LINE_LOOP GL_POLYGON GL_TRIANGLES GL_QUADS GL_QUAD_STRIP GL_TRIANGLE_STRIP GL_TRIANGLE_FAN Simple Example void drawRhombus( GLfloat color[] ) { glBegin( GL_QUADS ); glColor3fv( color ); glVertex2f( 0.0, 0.0 ); glVertex2f( 1.0, 0.0 ); glVertex2f( 1.5, 1.118 ); glVertex2f( 0.5, 1.118 ); glEnd(); } OpenGL Command Formats glVertex3fv( v ) Number of components 2 - (x,y) 3 - (x,y,z) 4 - (x,y,z,w) Data Type b ub s us i ui f d - byte unsigned byte short unsigned short int unsigned int float double Vector omit “v” for scalar form glVertex2f( x, y ) Specifying Geometric Primitives • Primitives are specified using glBegin( primType ); glEnd(); • primType determines how vertices are combined GLfloat red, greed, blue; Glfloat coords[3]; glBegin( primType ); for ( i = 0; i < nVerts; ++i ) { glColor3f( red, green, blue ); glVertex3fv( coords ); } glEnd(); OpenGL Color Models Poly. CPU Per Vertex Raster DL Frag Texture Pixel • RGBA or Color Index color index mode Red Green 1 2 4 8 ww 16 ww Blue 0 1 2 3 24 25 26 Display 123 www 219 74 www RGBA mode FB Shapes Tutorial • developed by Nate Robbins • Available on web (see references) Controlling Rendering Appearance • From Wireframe to Texture Mapped OpenGL’s State Machine • All rendering attributes are encapsulated in the OpenGL State • rendering styles • shading • lighting • texture mapping Manipulating OpenGL State • Appearance is controlled by current state for each ( primitive to render ) { update OpenGL state render primitive } • Manipulating vertex attributes is most common way to manipulate state glColor*() / glIndex*() glNormal*() glTexCoord*() Controlling current state • Setting State glPointSize( size ); glLineStipple( repeat, pattern ); glShadeModel( GL_SMOOTH ); • Enabling Features glEnable( GL_LIGHTING ); glDisable( GL_TEXTURE_2D ); Transformations in OpenGL • Modeling • Viewing • orient camera • projection • Animation • Map to screen Camera Analogy • 3D is just like taking a photograph (lots of photographs!) viewing volume camera tripod model Camera Analogy and Transformations • Projection transformations • adjust the lens of the camera • Viewing transformations • tripod–define position and orientation of the viewing volume in the world • Modeling transformations • moving the model • Viewport transformations • enlarge or reduce the physical photograph Coordinate Systems and Transformations • Steps in Forming an Image • specify geometry (world coordinates) • specify camera (camera coordinates) • project (window coordinates) • map to viewport (screen coordinates) • Each step uses transformations • Every transformation is equivalent to a change in coordinate systems (frames) Affine Transformations • Want transformations which preserve geometry • lines, polygons, quadrics • Affine = line preserving • Rotation, translation, scaling • Projection • Concatenation (composition) Homogeneous Coordinates • each vertex is a column vector x y v z w • w is usually 1.0 • all operations are matrix multiplications • directions (directed line segments) can be represented with w = 0.0 3D Transformations • A vertex is transformed by 4 x 4 matrices • • • • all affine operations are matrix multiplications all matrices are stored column-major in OpenGL matrices are always post-multiplied product of matrix and vector is Mv m0 m4 m8 m12 m m m m 1 5 9 13 M m2 m6 m10 m14 m3 m7 m11 m15 Specifying Transformations • Programmer has two styles of specifying transformations • specify matrices (glLoadMatrix, glMultMatrix) • specify operation (glRotate, glOrtho) • Programmer does not have to remember the exact matrices • check appendix of Red Book (Programming Guide) Programming Transformations • Prior to rendering, view, locate, and orient: • eye/camera position • 3D geometry • Manage the matrices • including matrix stack • Combine (composite) transformations Transformation Pipeline v e r t e x CPU eye object Per Vertex Poly. Raster DL Frag FB Texture Pixel normalized device clip window Modelview Matrix Projection Matrix Perspective Division Modelview Projection • other calculations here Modelview l l l • • • • • Viewport Transform material color shade model (flat) polygon rendering mode polygon culling clipping Matrix Operations • Specify Current Matrix Stack glMatrixMode( GL_MODELVIEW or GL_PROJECTION ) • Other Matrix or Stack Operations glLoadIdentity() glPushMatrix() glPopMatrix() • Viewport • usually same as window size • viewport aspect ratio should be same as projection transformation or resulting image may be distorted glViewport( x, y, width, height ) Projection Transformation • Shape of viewing frustum • Perspective projection gluPerspective( fovy, aspect, zNear, zFar ) glFrustum( left, right, bottom, top, zNear, zFar ) • Orthographic parallel projection glOrtho( left, right, bottom, top, zNear, zFar ) gluOrtho2D( left, right, bottom, top ) • calls glOrtho with z values near zero Applying Projection Transformations • Typical use (orthographic projection) glMatrixMode( GL_PROJECTION ); glLoadIdentity(); glOrtho( left, right, bottom, top, zNear, zFar ); Viewing Transformations • Position the camera/eye in the scene • place the tripod down; aim camera • To “fly through” a scene • change viewing transformation and redraw scene • gluLookAt( eyex, eyey, eyez, aimx, aimy, aimz, upx, upy, upz ) • up vector determines unique orientation • careful of degenerate positions tripod Modeling Transformations • Move object glTranslate{fd}( x, y, z ) • Rotate object around arbitrary axis x y z glRotate{fd}( angle, x, y, z ) • angle is in degrees • Dilate (stretch or shrink) or mirror object glScale{fd}( x, y, z ) Double Buffering CPU Raster DL Frag FB Texture Pixel 1 Front Buffer Per Vertex Poly. 2 1 4 8 16 2 4 8 16 Display Back Buffer Animation Using Double Buffering Request a double buffered color buffer glutInitDisplayMode( GLUT_RGB | GLUT_DOUBLE ); Clear color buffer glClear( GL_COLOR_BUFFER_BIT ); Render scene Request swap of front and back buffers glutSwapBuffers(); • Repeat steps 2 - 4 for animation Depth Buffering and Hidden Surface Removal 1 Color Buffer 2 1 4 8 16 2 4 8 16 Display Depth Buffer Depth Buffering Using OpenGL Request a depth buffer glutInitDisplayMode( GLUT_RGB | GLUT_DOUBLE | GLUT_DEPTH ); Enable depth buffering glEnable( GL_DEPTH_TEST ); Clear color and depth buffers glClear( GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT ); Render scene Swap color buffers An Updated Program Template void main( int argc, char** argv ) { glutInit( &argc, argv ); glutInitDisplayMode( GLUT_RGB | GLUT_DOUBLE | GLUT_DEPTH ); glutCreateWindow( “Tetrahedron” ); init(); glutIdleFunc( idle ); glutDisplayFunc( display ); glutMainLoop(); } An Updated Program Template (cont.) void init( void ) { glClearColor( 0.0, 0.0, 1.0, 1.0 ); } void idle( void ) { glutPostRedisplay(); } An Updated Program Template (cont.) void drawScene( void ) { GLfloat vertices[] = { … }; GLfloat colors[] = { … }; glClear( GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT ); glBegin( GL_TRIANGLE_STRIP ); /* calls to glColor*() and glVertex*() */ glEnd(); glutSwapBuffers(); } Lighting Principles • Lighting simulates how objects reflect light • material composition of object • light’s color and position • global lighting parameters • ambient light • two sided lighting • available in both color index and RGBA mode How OpenGL Simulates Lights • Phong lighting model • Computed at vertices • Lighting contributors • Surface material properties • Light properties • Lighting model properties Surface Normals Poly. CPU Per Vertex Raster DL Frag FB Texture Pixel • Normals define how a surface reflects light glNormal3f( x, y, z ) • Current normal is used to compute vertex’s color • Use unit normals for proper lighting • scaling affects a normal’s length glEnable( GL_NORMALIZE ) or glEnable( GL_RESCALE_NORMAL ) Material Properties • Define the surface properties of a primitive glMaterialfv( face, property, value ); GL_DIFFUSE Base color GL_SPECULAR Highlight Color GL_AMBIENT Low-light Color GL_EMISSION Glow Color GL_SHININESS Surface Smoothness • separate materials for front and back Light Properties glLightfv( light, property, value ); • light specifies which light • multiple lights, starting with GL_LIGHT0 glGetIntegerv( GL_MAX_LIGHTS, &n ); • properties • colors • position and type • attenuation Texture Mapping Poly. CPU Per Vertex Raster DL Frag FB Texture Pixel • Apply a 1D, 2D, or 3D image to geometric • primitives Uses of Texturing • simulating materials • reducing geometric complexity • image warping • reflections Texture Mapping y z x geometry t image s screen Texture Mapping and the OpenGL Pipeline • Images and geometry flow through separate pipelines that join at the rasterizer • “complex” textures do not affect geometric complexity vertices geometry pipeline rasterizer image pixel pipeline Applying Textures I • Three steps specify texture • read or generate image • assign to texture assign texture coordinates to vertices specify texture parameters • wrapping, filtering Immediate Mode versus Display Listed Rendering • Immediate Mode Graphics • Primitives are sent to pipeline and display right away • No memory of graphical entities • Display Listed Graphics • Primitives placed in display lists • Display lists kept on graphics server • Can be redisplayed with different state • Can be shared among OpenGL graphics contexts Other OpenGL Features • Curves and Surfaces • Quadrics • Bezier Curves and Surfaces • Pixels and bit-maps • Buffers • Accumulation • Auxiliary • Stencil Angel Class • • • • www.cs.unm.edu/~angel/CS433 Class 50% undergrad, 50% grads Mostly computer science and engineering Emphasis • Importance of significant term project • Three dimensional ideas • viewing/transformations • Modeling Angel Syllabus • Week 1: Intro • Image formation • Synthetic Camera Model • Rendering Paradigms • Ray tracing • Pipeline • Modeling vs Rendering Angel Syllabus (cont) • Weeks 2-4 Programming with OpenGL • 2D as special case of 3D • Assign first programming project – 2D maze (extends to 3D) – Hilbert curves and turtle graphics • Interaction with GLUT • Assign second programming project – Paint program – Modeling project Angel Syllabus (Cont) • Weeks 5-6 Three Dimensional Graphics • Transformations • Viewing • Assign third programming project • Rubik’s cube • 3D Maze walk through • Week 7 Shading Angel Syllabus (Cont) • Weeks 8-9 Modeling • Weeks 10-11 Implementation • Weeks 12-15 Topics • Fractals • Particles • Curves and Surfaces Angel Assignment 1 • Simple OpenGL program • Generate a Hilbert curve or a two• • dimensional maze Assignment is 2D and requires a minimal amount of interaction Should be sufficiently difficult to test whether students can carry out larger programming projects Angel Assignment 2 • Interaction: emphasis on use of callbacks • Variants of painting programs • Simple checkers game • users plays both sides • room for optional extensions Angel Assignment 3 • Three-dimensional transformations and • • viewing Extend maze to three dimensions and do a walk through Simple lighting Angel Term Project • Takes about half the semester • Allows students to explore an area • • relevant to their own interests Acts as capstone class (design, analysis, software engineering, algorithms) Problem: students pick too ambitious projects • need layered projects Examples of Term Projects • Logic design package • Games • Scientific Visualization • Surface display from equations • Marching cubes • Modelers • Interfaces (Maya, Renderman, AutoCad) Hill class • http://www.ecs.umass.edu/ece/hill/ece660.htm • Fundamentals of graphics display devices and input • • • • devices; PostScript as an elementary page layout graphics language; Geometric transformations in PostScript; Menu design and interaction; Windowing and clipping; Hill Syllabus II • • • • • • • • OpenGL for rendering 2D and 3D scenes; Interactive techniques; 2D and 3D transformations Tiling patterns, fractals, and the Mandelbrot set; Perspective and parallel projections; Lighting and shading models for rendering scenes; Navigating a camera through a 3D scene; Adding textures to surfaces. Hill Project 1: Callbacks • At start-up a screen window is opened, showing a large "drawing area", with four small icons at the bottom. These icons are miniature versions of three "polyline figures" as described below, and one procedural figure. • The user interacts with the application using both the mouse and keyboard. Hill Project 2: Mandelbrot Set • Write an application that draws a portion of the Mandelbrot set in "pixel blocks" (described in class). Initially the entire Mandelbrot set is shown as an array of colored squares (a raster), using the default window (with opposite corners: 1.5 + j1.2 and 0.5 - j1.2). The raster consists of numAcross columns and as many rows as will fit in the screen window. The user then designates a rectangle (using a rubber rectangle), and the designated portion of the Mandelbrot set is redrawn in the biggest viewport that fits in the screen window. Hill Project 3: The Wonderful Whirler Watcher • Fashion and exercise a program that lets a user fly a camera through a dynamically changing scene. The scene consists of the three coordinate axes (each shown as a thin cylinder of length 2 with a small cone at its end), the axis of rotation (shown as a thin cylinder emanating from the origin), and the chosen object rotating about the axis of rotation. Hill Project 3 (cont) • The Objects: The user can choose which object is displayed from a fixed set, (by picking from a menu or using GLUI radio buttons). The set of objects consists of the nine shapes listed on pages 659-660 (pages 583-584 if you are using the Second edition), plus the cylinder described on page 489 (or page 431 in the Second edition). Wireframe or solid views of each object are selectable by the user. Hill Project 4: Modeling • Model a fair approximation to one of the world's great architectural buildings. A castle provides a good choice, but you can instead choose to do some other building such as the Taj Mahal, the Parthenon, the Horyuji temple at Nara, the Forbideen City at Beijing, San Vitale at Ravenna, the Dome of the Rock in Jerusalem, the Chateua of Fontainebleu, etc. Hill Project 4 (cont) • The user browses through and around this scene with a camera that is controlled by mouse clicks and keystrokes. Give your browser the functionality similar to that of a VRML browser (Have a look at VrmLab for an example. Perhaps download a VRML browser and get some practice navigating VRML scenes.) Hill Project 5 • Enhance the application of your previous project so that textures are mapped onto some of the parts of the building. • Use at least three different textures, one of which is created algorithmically (see note below), and two of which are obtained by reading BMP-format image files from disk. You may find the RGBpixmap class on the course FTP site useful for this. Obtaining OpenGL • • • • Windows SGI SUN Mesa Language Bindings • • • • C standard C++ OK but OpenGL not object oriented Fortran binding exists Java under discussion • Magician (www.arcana.symbolstone.org) Higher Level APIs • • • • VRML Inventor Java 3D Java-OpenGL On-Line Resources • http://www.opengl.org • news:comp.graphics.api.opengl • http://www.sgi.com/software/opengl • http://www.mesa3d.org/ (Mesa) • http://www.cs.utah.edu/~narobins/opengl.html (Tutorials) • http://www.cs.unm.edu/~angel • http://www.ecs.umass.edu/ece/hill Books • OpenGL Programming Guide, 3rd Edition • OpenGL Reference Manual, 3rd Edition • OpenGL Programming for the X Window • • System Interactive Computer Graphics: A topdown approach with OpenGL, 2nd Edition Computer Graphics with OpenGL Acknowledgements • Dave Shreiner and Vicki Shreiner (SGI) for • • • notes from SIGGRAPH OpenGL tutorial Nate Robins for creating the tutor demos Brian Paul for Mesa Mark Kilgard for GLUT