820 likes | 1.31k Views
CIS 636 Introduction to Computer Graphics CG Basics 5 of 8: OpenGL Primer, Part 2 of 3 William H. Hsu Department of Computing and Information Sciences, KSU KSOL course pages: http://snipurl.com/1y5gc Course web site: http://www.kddresearch.org/Courses/CIS636
E N D
CIS 636Introduction to Computer Graphics CG Basics 5 of 8: OpenGL Primer, Part 2 of 3 William H. Hsu Department of Computing and Information Sciences, KSU KSOL course pages: http://snipurl.com/1y5gc Course web site: http://www.kddresearch.org/Courses/CIS636 Instructor home page: http://www.cis.ksu.edu/~bhsu Readings: All slides from SIGGRAPH 2000 tutorial on OpenGL, Shreiner, Angel, Shreiner: http://www.cs.unm.edu/~angel/SIGGRAPH/ Sections 2.6, 3.1, 20.3 – 20.13, Eberly 2e – see http://snurl.com/1ye72 NeHe tutorials: 6 – 10, http://nehe.gamedev.net Article: http://www.kuro5hin.org/story/2003/10/28/9853/1617 CIS 636/736: (Introduction to) Computer Graphics
Lecture Outline • Four More Short OpenGL Tutorials from SIGGRAPH 2000 • Vicki Shreiner: Animation and Depth Buffering • Double buffering • Illumination: light positioning, light models, attenuation • Material properties • Animation basics in OpenGL • Vicki Shreiner: Imaging and Raster Primitives • Ed Angel: Texture Mapping • Dave Shreiner: Advanced Topics • Display lists and vertex arrays • Accumulation buffer • Fog • Stencil buffering • Fragment programs (to be concluded in Tutorial 3) CIS 636/736: (Introduction to) Computer Graphics
Animation and Depth Buffering Vicki Shreiner CIS 636/736: (Introduction to) Computer Graphics
Animation and Depth Buffering • Double buffering and animation • Using depth buffer • Hidden surface removal • aka visible surface determination CIS 636/736: (Introduction to) Computer Graphics
Per Vertex Poly. Frag FB Raster CPU DL Texture Pixel 1 1 2 2 4 4 Front Buffer Back Buffer 8 8 16 16 Display Double Buffering CIS 636/736: (Introduction to) Computer Graphics
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 CIS 636/736: (Introduction to) Computer Graphics
Depth Buffering andHidden Surface Removal 1 1 2 2 4 4 Color Buffer Depth Buffer 8 8 16 16 Display CIS 636/736: (Introduction to) Computer Graphics
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 CIS 636/736: (Introduction to) Computer Graphics
Updated Program Template [1] void main( int argc, char** argv ) { glutInit( &argc, argv ); glutInitDisplayMode( GLUT_RGB | GLUT_DOUBLE | GLUT_DEPTH ); glutCreateWindow( “Tetrahedron” ); init(); glutIdleFunc( idle ); glutDisplayFunc( display ); glutMainLoop(); } CIS 636/736: (Introduction to) Computer Graphics
Updated Program Template [2] void init( void ){ glClearColor( 0.0, 0.0, 1.0, 1.0 );}void idle( void ){ glutPostRedisplay();} CIS 636/736: (Introduction to) Computer Graphics
Updated Program Template [3] 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(); } CIS 636/736: (Introduction to) Computer Graphics
Lighting Dave Shreiner CIS 636/736: (Introduction to) Computer Graphics
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 indexand RGBA mode CIS 636/736: (Introduction to) Computer Graphics
How OpenGL Simulates Lights • Phong lighting model • Computed at vertices • Lighting contributors • Surface material properties • Light properties • Lighting model properties CIS 636/736: (Introduction to) Computer Graphics
Per Vertex Poly. Frag FB Raster CPU DL Texture Pixel Surface Normals • 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 )orglEnable( GL_RESCALE_NORMAL ) CIS 636/736: (Introduction to) Computer Graphics
Material Properties • Define the surface properties of a primitive glMaterialfv( face, property, value ); • separate materials for front and back CIS 636/736: (Introduction to) Computer Graphics
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 CIS 636/736: (Introduction to) Computer Graphics
Light Sources • Light color properties • GL_AMBIENT • GL_DIFFUSE • GL_SPECULAR CIS 636/736: (Introduction to) Computer Graphics
Types of Lights • OpenGL supports two types of Lights • Local (Point) light sources • Infinite (Directional) light sources • Type of light controlled by w coordinate CIS 636/736: (Introduction to) Computer Graphics
Turning on the Lights • Flip each light’s switch glEnable( GL_LIGHTn ); • Turn on power glEnable( GL_LIGHTING ); CIS 636/736: (Introduction to) Computer Graphics
Light Material Tutorial CIS 636/736: (Introduction to) Computer Graphics
Controlling a Light’s Position • Modelview matrix affects a light’s position • Different effects based on whenposition is specified • eye coordinates • world coordinates • model coordinates • Push and pop matrices to uniquely control a light’s position CIS 636/736: (Introduction to) Computer Graphics
Light Position Tutorial CIS 636/736: (Introduction to) Computer Graphics
Advanced Lighting Features [1] • Spotlights • localize lighting affects • GL_SPOT_DIRECTION • GL_SPOT_CUTOFF • GL_SPOT_EXPONENT CIS 636/736: (Introduction to) Computer Graphics
Advanced Lighting Features [2] • Light attenuation • decrease light intensity with distance • GL_CONSTANT_ATTENUATION • GL_LINEAR_ATTENUATION • GL_QUADRATIC_ATTENUATION CIS 636/736: (Introduction to) Computer Graphics
Light Model Properties glLightModelfv( property, value ); • Enabling two sided lighting GL_LIGHT_MODEL_TWO_SIDE • Global ambient color GL_LIGHT_MODEL_AMBIENT • Local viewer mode GL_LIGHT_MODEL_LOCAL_VIEWER • Separate specular color GL_LIGHT_MODEL_COLOR_CONTROL CIS 636/736: (Introduction to) Computer Graphics
Tips for Better Lighting • Recall lighting computed only at vertices • model tessellation heavily affects lighting results • better results but more geometry to process • Use a single infinite light for fastest lighting • minimal computation per vertex CIS 636/736: (Introduction to) Computer Graphics
Imaging and Raster Primitives Vicki Shreiner CIS 636/736: (Introduction to) Computer Graphics
Imaging and Raster Primitives • Describe OpenGL’s raster primitives: bitmaps and image rectangles • Demonstrate how to get OpenGL to read and render pixel rectangles CIS 636/736: (Introduction to) Computer Graphics
Pixel-based primitives • Bitmaps • 2D array of bit masks for pixels • update pixel color based on current color • Images • 2D array of pixel color information • complete color information for each pixel • OpenGL doesn’t understand image formats CIS 636/736: (Introduction to) Computer Graphics
Per Vertex Poly. Frag FB Raster CPU DL Texture Pixel Pixel Pipeline • Programmable pixel storage and transfer operations glBitmap(), glDrawPixels() Rasterization (including Pixel Zoom) Pixel Storage Modes Pixel-Transfer Operations (and Pixel Map) Per FragmentOperations FrameBuffer CPU glCopyTex*Image(); TextureMemory glReadPixels(), glCopyPixels() CIS 636/736: (Introduction to) Computer Graphics
Positioning Image Primitives glRasterPos3f( x, y, z ) • raster position transformed like geometry • discarded if raster position isoutside of viewport • may need to fine tuneviewport for desired results Raster Position CIS 636/736: (Introduction to) Computer Graphics
height yorig width xorig xmove Rendering Bitmaps glBitmap( width, height, xorig, yorig, xmove, ymove, bitmap ) • render bitmap in current colorat • advance raster position by after rendering CIS 636/736: (Introduction to) Computer Graphics
Rendering Fonts using Bitmaps • OpenGL uses bitmaps for font rendering • each character stored in display list containing bitmap • window system specific routines to access system fonts • glXUseXFont() • wglUseFontBitmaps() CIS 636/736: (Introduction to) Computer Graphics
Rendering Images glDrawPixels( width, height, format, type, pixels ) • render pixels with lower left ofimage at current raster position • numerous formats and data typesfor specifying storage in memory • best performance by using format and type that matches hardware CIS 636/736: (Introduction to) Computer Graphics
Reading Pixels glReadPixels( x, y, width, height, format, type, pixels ) • read pixels from specified (x,y) position in framebuffer • pixels automatically converted from framebuffer format into requested format and type • Framebuffer pixel copy glCopyPixels( x, y, width, height, type ) CIS 636/736: (Introduction to) Computer Graphics
RasterPosition glPixelZoom(1.0, -1.0); Pixel Zoom glPixelZoom( x, y ) • expand, shrink or reflect pixelsaround current raster position • fractional zoom supported CIS 636/736: (Introduction to) Computer Graphics
Storage and Transfer Modes • Storage modes control accessing memory • byte alignment in host memory • extracting a subimage • Transfer modes allow modify pixel values • scale and bias pixel component values • replace colors using pixel maps CIS 636/736: (Introduction to) Computer Graphics
Texture Mapping Ed Angel CIS 636/736: (Introduction to) Computer Graphics
Per Vertex Poly. Frag FB Raster CPU DL Texture Pixel Texture Mapping • Apply 1-D, 2-D, or 3-D image to geometric primitives • Uses of Texturing • simulating materials • reducing geometric complexity • image warping • reflections CIS 636/736: (Introduction to) Computer Graphics
y z x t s Texture Mapping screen geometry image CIS 636/736: (Introduction to) Computer Graphics
Images and geometry flow through separate pipelines that join at the rasterizer “complex” textures do not affect geometric complexity geometry pipeline vertices rasterizer image pixel pipeline Texture Mapping andOpenGL Pipeline CIS 636/736: (Introduction to) Computer Graphics
Texture Example • The texture (below) is a 256 x 256 image that has beenmapped to a rectangularpolygon which is viewed inperspective CIS 636/736: (Introduction to) Computer Graphics
Applying Textures [1] • Three steps • specify texture • read or generate image • assign to texture • assign texture coordinates to vertices • specify texture parameters • wrapping, filtering CIS 636/736: (Introduction to) Computer Graphics
Applying Textures [2] • 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 CIS 636/736: (Introduction to) Computer Graphics
Texture Objects [1] • Like display lists for texture images • one image per texture object • may be shared by several graphics contexts • Generate texture names glGenTextures(n,*texIds ); CIS 636/736: (Introduction to) Computer Graphics
Texture Objects [2] • Create texture objects with texture data and state glBindTexture( target, id ); • Bind textures before using glBindTexture( target, id ); CIS 636/736: (Introduction to) Computer Graphics
Per Vertex Poly. Frag FB Raster CPU DL Texture Pixel Specify Texture Image • Define a texture image from array of texels in CPU memory glTexImage2D( target, level, components, w, h, border, format, type, *texels ); • dimensions of image must be powers of 2 • Texel colors are processed by pixel pipeline • pixel scales, biases and lookups can bedone CIS 636/736: (Introduction to) Computer Graphics
Converting Texture Images • If dimensions of image are not power of 2 gluScaleImage( format, w_in, h_in, type_in, *data_in, w_out, h_out, type_out, *data_out ); • *_in is for source image • *_out is for destination image • Image interpolated and filtered during scaling CIS 636/736: (Introduction to) Computer Graphics
Specifying Textures:Other Methods • Use frame buffer as source of texture image • uses current buffer assource image glCopyTexImage2D(...) glCopyTexImage1D(...) • Modify part of a defined texture glTexSubImage2D(...) glTexSubImage1D(...) • Do both with glCopyTexSubImage2D(...), etc. CIS 636/736: (Introduction to) Computer Graphics