Computer Graphics

1. Computer Graphics Dr. Amy Zhang Assistant Professor of Computer Science United International College

2. Welcome! • Applications • Introductions • What is computer graphics? • OpenGL and GLUT Overview

3. Applications • Movies andgames • Visualization • techniques for creating images, diagrams, or animations to communicate a message. • Digital photography • Computer aided design (CAD) • the use of computer technology for the design of objects, real or virtual.

4. Virtual reality • a technology which allows a user to interact with a computer-simulated environment, whether that environment is a simulation of the real world or an imaginary world. • Augmented reality • a live direct or indirect view of a physical real-world environment whose elements are merged with (or augmented by) virtual computer-generated imagery - creating a mixed reality. • Art

5. Movies & Games http://v.ku6.com/show/NzTgFbaxHf7FtACc.html http://v.youku.com/v_show/id_XMTExMTAyMjY4.html

6. Visualization http://www.earthol.com/

7. Digital Photography http://www.easypano.com/virtual-tour-gallery.html#

8. Computer Aided Design (CAD)

9. Virtual and Augmented Reality v.zol.com.cn/video62155.html

10. Art “Contact Water” Taisuke Murakami, 2001 Steven Parente http://www.alohablooms.com/atomica1.html Artificial Evolution for Computer Graphics Karl Sims, SIGGRAPH ’91

11. What is Computer Graphics? • Computer graphics • Computer graphics deals with all aspects of creating images with a computer • Graphics • often combine text, illustration, and color, visual presentations on surfaces, e.g. a wall, canvas, computer screen, paper, or stone to brand, inform, illustrate, or entertain. • Examples: photographs, drawings, line art, graphs, diagrams, typography, numbers, symbols, geometric designs, maps, engineering drawings, etc.

12. General concepts • Image • an artifact, usually two-dimensional, that has a similar appearance to some subject—usually a physical object or a person. • They may be captured by optical devices—such as cameras, mirrors, lenses, telescopes, microscopes, etc. and natural objects and phenomena, such as the human eye or water surfaces. • A digital image is a representation of a two-dimensional image using ones and zeros (binary). • Pixel • the smallest piece of information in an image. • normally arranged in a regular 2-dimensional grid, and are often represented using dots or squares. • The intensity of each pixel is variable; in color systems, each pixel has typically three components such as red, green, and blue.

13. Rendering • the process of generating an image from a model, by means of computer programs, is also used to describe the process of calculating effects in a video editing file to produce final video output. • Model • a description of 3 dimensional objects in a strictly defined language or data structure. It would contain geometry, viewpoint, texture, lighting, and shading information.

14. Animation • the rapid display of a sequence of images of 2-D or 3-D artwork or model positions in order to create an illusion of movement.

15. The graphics process • Process to simulateinteraction of light and matter

16. 1.Modeling • Vertex • Polygon • a plane figure that is bounded by a closed path or circuit, composed of a finite sequence of straight line segments Model Vertex Surface

17. Graphical Models • Geometric • 2D and 3D objects • Triangles, quadrilaterals, polygons • Spheres, cones, boxes • Surface characteristics • Color • Texture • Composite objects • Objects and their relationships to each other • Lighting, shading, animation, fog, etc.

18. The basic idea • Describe an object using surfaces, which are polygons • Triangles, quadrilaterals, whatever • Important thing is that they are flat • They must also be convex • Provide points in counterclock-wise order • From the visible side

19. 2.Transformations • Scaling • Translation • Rotation • Skew (Shear)

20. 3.Texturing • Texture - A bitmap image applied to a surface in computer graphics • Make 3D objects realistic without texture with texture

21. Texture/Displacement/Bump Map

22. 4.Viewing and projections • Central projection • Parallel projection

23. 5.Light and Color

24. 6. Illumination Models

25. 7. Shading models

26. Rasterization • Conversion of 3D model to 2D image • Projection • Determine pixel • Determine color

27. 8.Ray Tracing • Back tracing the ray coming into the viewer’s eye

28. 9. Curves & Surfaces • Free shape control/animation • Less storage

29. Animation

30. OpenGL and GLUT Overview

31. What Is OpenGL? • Graphics rendering API • high-quality color images composed of geometric and image primitives • window system independent • operating system independent

32. 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.

33. Preliminaries • Headers Files • #include <GL/gl.h> • #include <GL/glu.h> • #include <GL/glut.h> • glut.h automatically include the others • Libraries • gult3d.lib, glut32.dll • Enumerated Types • OpenGL defines numerous types for compatibility • GLfloat, GLint, GLenum, etc.

34. Compilation on Windows • Get glut.h, glut32.lib, glut32.dll from web • Create a console application • Store glut.h in Additional include directory • Add opengl32.lib, glut32.lib to project settings (under link tab) and store them in Additional library directory • Add glut32.dll to c:/windows/system32

35. 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

36. 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(); }

37. 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 ); }

38. 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 );

39. 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(); }

40. Idle Callbacks • Use for animation and continuous update glutIdleFunc( idle ); void idle( void ) { t += dt; glutPostRedisplay(); }

41. 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; } }

42. Summary • There is one field called the primary key which uniquely identify a record • SQL can be used to • Create the tables • Add, change, and delete data • Query the DB for specific information • DB vs File System • ER model