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

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

3. 3 Applications  Movies and games  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. 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. 5 Movies & Games http://v.ku6.com/show/NzTgFbaxHf7FtACc.html http://v.youku.com/v_show/id_XMTExMTAyMjY4.html

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

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

8. 8 Computer Aided Design (CAD)

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

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

11. 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. 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. 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  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. texturelightingshading

14. 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. 15 The graphics process  Process to simulate interaction of light and matter

16. 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 Surface Vertex

17. 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. 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. 19 2.Transformations  Scaling  Translation  Rotation  Skew (Shear)

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

21. 21  Texture/Displacement/Bump Map

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

23. 23 5.Light and Color

24. 24 6. Illumination Models

25. 25 7. Shading models

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

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

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

29. 29 Animation

30. 30 OpenGL and GLUT Overview

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

32. 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. 33 Preliminaries  Headers Files #include glut.h automatically include the others  Libraries gult3d.lib, glut32.dll  Enumerated Types OpenGL defines numerous types for compatibility  GLfloat, GLint, GLenum, etc.

34. 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. 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. 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. 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. 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. 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. 40 Idle Callbacks  Use for animation and continuous update glutIdleFunc( idle ); void idle( void ) { t += dt; glutPostRedisplay(); }

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