1 / 46

Computer Graphics CSCE 441

Computer Graphics CSCE 441. Jinxiang Chai. Staff. Instructor Dr. Jinxiang Chai HRBB 527D Office Hours: MW 3:10pm-4:00pm, (or by appointment) TA Hui Lou HRBB 526 Office Hours: ?. Why did you take this class?. Games. Movies. Visualization. Industrial Design.

bhensen
Download Presentation

Computer Graphics CSCE 441

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Computer Graphics CSCE 441 Jinxiang Chai

  2. Staff • Instructor • Dr. Jinxiang Chai • HRBB 527D • Office Hours: MW 3:10pm-4:00pm, (or by appointment) • TA • Hui Lou • HRBB 526 • Office Hours: ?

  3. Why did you take this class?

  4. Games

  5. Movies

  6. Visualization

  7. Industrial Design

  8. What will you learn in this class? • 2D Graphics • Drawing lines, polygons Image processing • 3D Graphics • Transformations • Lighting • Ray Tracing • Geometric Modeling • Animation

  9. What you’re expected to know • Programming Experience • Assignments in C/C++ • Simple Mathematics Graphics is mathematics made visible

  10. How much math? • General geometry/linear algebra • Matrices • Multiplication, inversion, determinant • Vectors • Dot product, cross product, linear independence

  11. First Homework Assignment! • Linear Algebra Test http://projects.cs.tamu.edu/keyser/LAtest/ • Complete within the first month (Sep 30, 2010) • Take as many times as you like • Must get at least 90% correct Grade = ActualGrade * (exam 90% ? 1 : 0 )

  12. Other Assignments • Simple GLUT/OpenGL Application • Polygon Drawing and Clipping • Modeling and View Transform • Hidden Surfaces, Texture mapping and Shadings • Ray Tracing • Animation from Mocap

  13. Samples of assignments Animation with mocap Ray tracer

  14. More on Assignments • Turn in code via CSNET (get an account if you don’t already have one) • Due by midnight on day specified • Code and Win32 executable • Make your code readable (comment) • You may discuss concepts, but coding is individual (no “team coding” or web)

  15. Grading • 60% Assignments • 15% Midterm • 25% Final • One free late assignment (up to 48 hours) • Other late assignments 50% off

  16. Required Textbooks

  17. Suggested Reading

  18. Introduction to OpenGL • What is OpenGL? • Computer-graphics API (application programming interface) • Developed by SGI in 1992 • Efficient, streaming interfacepr • 250+ function calls for drawing 2D and 3D graphicss • Hardware independent • Operating system independent • Compete against direct3D from microsoft

  19. Introduction to OpenGL • What OpenGL is NOT • No commands for windowing • No commands for obtaining user input • No commands for anything except drawing on the screen

  20. A Smidgen of OpenGL Code # include <whateverYouNeed.h> Main() { IntializeAWindowPlease(); glClearColor (0.0, 0.0, 0.0, 0.0); glClear (GL_COLOR_BUFFER_BIT); glColor3f ( 1.0, 1.0, 1.0); glOrtho (0.0, 1.0, 0.0, 1.0, -1.0, 1.0); glBegin (GL_POLYGON); glVertex3f (0.25, 0.25, 0.0); glVertex3f (0.75, 0.25, 0.0); glVertex3f (0.75, 0.75, 0.0); glVertex3f (0.25, 0.75, 0.0); glEnd(); glFlush(); UpdateTheWindowAndCheckForEvents(); }

  21. A Smidgen of OpenGL Code Sets the color for clearing the screen # include <whateverYouNeed.h> Main() { IntializeAWindowPlease(); glClearColor (0.0, 0.0, 0.0, 0.0); glClear (GL_COLOR_BUFFER_BIT); glColor3f ( 1.0, 1.0, 1.0); glOrtho (0.0, 1.0, 0.0, 1.0, -1.0, 1.0); glBegin (GL_POLYGON); glVertex3f (0.25, 0.25, 0.0); glVertex3f (0.75, 0.25, 0.0); glVertex3f (0.75, 0.75, 0.0); glVertex3f (0.25, 0.75, 0.0); glEnd(); glFlush(); UpdateTheWindowAndCheckForEvents(); }

  22. A Smidgen of OpenGL Code Clears the screen # include <whateverYouNeed.h> Main() { IntializeAWindowPlease(); glClearColor (0.0, 0.0, 0.0, 0.0); glClear (GL_COLOR_BUFFER_BIT); glColor3f ( 1.0, 1.0, 1.0); glOrtho (0.0, 1.0, 0.0, 1.0, -1.0, 1.0); glBegin (GL_POLYGON); glVertex3f (0.25, 0.25, 0.0); glVertex3f (0.75, 0.25, 0.0); glVertex3f (0.75, 0.75, 0.0); glVertex3f (0.25, 0.75, 0.0); glEnd(); glFlush(); UpdateTheWindowAndCheckForEvents(); }

  23. A Smidgen of OpenGL Code Sets the current drawing color to white # include <whateverYouNeed.h> Main() { IntializeAWindowPlease(); glClearColor (0.0, 0.0, 0.0, 0.0); glClear (GL_COLOR_BUFFER_BIT); glColor3f ( 1.0, 1.0, 1.0); glOrtho (0.0, 1.0, 0.0, 1.0, -1.0, 1.0); glBegin (GL_POLYGON); glVertex3f (0.25, 0.25, 0.0); glVertex3f (0.75, 0.25, 0.0); glVertex3f (0.75, 0.75, 0.0); glVertex3f (0.25, 0.75, 0.0); glEnd(); glFlush(); UpdateTheWindowAndCheckForEvents(); }

  24. A Smidgen of OpenGL Code Sets the window coordinates to (0,0,-1) – (1,1,1) # include <whateverYouNeed.h> Main() { IntializeAWindowPlease(); glClearColor (0.0, 0.0, 0.0, 0.0); glClear (GL_COLOR_BUFFER_BIT); glColor3f ( 1.0, 1.0, 1.0); glOrtho (0.0, 1.0, 0.0, 1.0, -1.0, 1.0); glBegin (GL_POLYGON); glVertex3f (0.25, 0.25, 0.0); glVertex3f (0.75, 0.25, 0.0); glVertex3f (0.75, 0.75, 0.0); glVertex3f (0.25, 0.75, 0.0); glEnd(); glFlush(); UpdateTheWindowAndCheckForEvents(); }

  25. A Smidgen of OpenGL Code # include <whateverYouNeed.h> Main() { IntializeAWindowPlease(); glClearColor (0.0, 0.0, 0.0, 0.0); glClear (GL_COLOR_BUFFER_BIT); glColor3f ( 1.0, 1.0, 1.0); glOrtho (0.0, 1.0, 0.0, 1.0, -1.0, 1.0); glBegin (GL_POLYGON); glVertex3f (0.25, 0.25, 0.0); glVertex3f (0.75, 0.25, 0.0); glVertex3f (0.75, 0.75, 0.0); glVertex3f (0.25, 0.75, 0.0); glEnd(); glFlush(); UpdateTheWindowAndCheckForEvents(); } Starts drawing a polygon

  26. A Smidgen of OpenGL Code # include <whateverYouNeed.h> Main() { IntializeAWindowPlease(); glClearColor (0.0, 0.0, 0.0, 0.0); glClear (GL_COLOR_BUFFER_BIT); glColor3f ( 1.0, 1.0, 1.0); glOrtho (0.0, 1.0, 0.0, 1.0, -1.0, 1.0); glBegin (GL_POLYGON); glVertex3f (0.25, 0.25, 0.0); glVertex3f (0.75, 0.25, 0.0); glVertex3f (0.75, 0.75, 0.0); glVertex3f (0.25, 0.75, 0.0); glEnd(); glFlush(); UpdateTheWindowAndCheckForEvents(); } Specifies the vertices of the polygon

  27. A Smidgen of OpenGL Code # include <whateverYouNeed.h> Main() { IntializeAWindowPlease(); glClearColor (0.0, 0.0, 0.0, 0.0); glClear (GL_COLOR_BUFFER_BIT); glColor3f ( 1.0, 1.0, 1.0); glOrtho (0.0, 1.0, 0.0, 1.0, -1.0, 1.0); glBegin (GL_POLYGON); glVertex3f (0.25, 0.25, 0.0); glVertex3f (0.75, 0.25, 0.0); glVertex3f (0.75, 0.75, 0.0); glVertex3f (0.25, 0.75, 0.0); glEnd(); glFlush(); UpdateTheWindowAndCheckForEvents(); } Ends the polygon

  28. A Smidgen of OpenGL Code # include <whateverYouNeed.h> Main() { IntializeAWindowPlease(); glClearColor (0.0, 0.0, 0.0, 0.0); glClear (GL_COLOR_BUFFER_BIT); glColor3f ( 1.0, 1.0, 1.0); glOrtho (0.0, 1.0, 0.0, 1.0, -1.0, 1.0); glBegin (GL_POLYGON); glVertex3f (0.25, 0.25, 0.0); glVertex3f (0.75, 0.25, 0.0); glVertex3f (0.75, 0.75, 0.0); glVertex3f (0.25, 0.75, 0.0); glEnd(); glFlush(); UpdateTheWindowAndCheckForEvents(); } Flushes all commands to ensure polygon is drawn

  29. OpenGL Command Formats glVertex3fv( v ) Prefix Initial capital letters Data Type Vector Number of components b - byte ub - unsigned byte s - short us - unsigned short i - int ui - unsigned int f - float d - double omit “v” for scalar form glVertex2f( x, y ) 2 - (x,y) 3 - (x,y,z) 4 - (x,y,z,w)

  30. GL_LINES GL_POLYGON GL_LINE_STRIP GL_LINE_LOOP GL_POINTS GL_TRIANGLES GL_QUADS GL_TRIANGLE_FAN GL_TRIANGLE_STRIP GL_QUAD_STRIP OpenGL Geometric Primitives • All geometric primitives are specified by vertices

  31. OpenGL Drawing Functions glBegin (GL_POINTS); glVertex2iv (p1); glVertex2iv (p2); glVertex2iv (p3); glVertex2iv (p4); glVertex2iv (p5); glVertex2iv (p6); glEnd(); P6 P5 P1 P4 P2 P3 Each vertex specifies a point.

  32. OpenGL Drawing Functions glBegin (GL_LINES); glVertex2iv (p1); glVertex2iv (p2); glVertex2iv (p3); glVertex2iv (p4); glVertex2iv (p5); glVertex2iv (p6); glEnd(); P6 P5 P1 P4 Each pair of vertices creates a line P2 P3

  33. OpenGL Drawing Functions glBegin (GL_LINE_STRIP); glVertex2iv (p1); glVertex2iv (p2); glVertex2iv (p3); glVertex2iv (p4); glVertex2iv (p5); glVertex2iv (p6); glEnd(); P6 P5 P1 P4 P2 P3 The first vertex specifies a starting point and every successive vertex creates a line from the previous vertex.

  34. OpenGL Drawing Functions glBegin (GL_LINE_LOOP); glVertex2iv (p1); glVertex2iv (p2); glVertex2iv (p3); glVertex2iv (p4); glVertex2iv (p5); glVertex2iv (p6); glEnd(); P6 P5 P1 P4 P2 P3 Same as the GL_LINE_STRIP except that the first and last vertices are also connected with a line

  35. OpenGL Drawing Functions glBegin (GL_POLYGON); glVertex2iv (p1); glVertex2iv (p2); glVertex2iv (p3); glVertex2iv (p4); glVertex2iv (p5); glVertex2iv (p6); glEnd(); P6 P5 P1 P4 P2 P3 N vertices can be placed to create an N sides polygon.

  36. OpenGL Drawing Functions glBegin (GL_TRIANGLES); glVertex2iv (p1); glVertex2iv (p2); glVertex2iv (p6); glVertex2iv (p3); glVertex2iv (p4); glVertex2iv (p5); glEnd(); P6 P5 P1 P4 P2 P3 Each triplet of vertices forms a triangle

  37. OpenGL Drawing Functions glBegin (GL_TRIANGLES_STRIP); glVertex2iv (p1); glVertex2iv (p2); glVertex2iv (p6); glVertex2iv (p3); glVertex2iv (p5); glVertex2iv (p4); glEnd(); P6 P5 P1 P4 P2 P3 The first 3 vertices form a triangle. Every following vertex along with the previous 2 vertices is used to form another triangle.

  38. OpenGL Drawing Functions glBegin (GL_TRIANGLES_FAN); glVertex2iv (p1); glVertex2iv (p2); glVertex2iv (p3); glVertex2iv (p4); glVertex2iv (p5); glVertex2iv (p6); glEnd(); P6 P5 P1 P4 P2 P3 This first vertex specifies the main vertex. Every following pair of vertices are used along with the main vertex to form a triangle.

  39. OpenGL Drawing Functions glBegin (GL_QUADS); glVertex2iv (p1); glVertex2iv (p2); glVertex2iv (p3); glVertex2iv (p4); glVertex2iv (p5); glVertex2iv (p6); glVertex2iv (p7); glVertex2iv (p8); glEnd(); P8 P1 P4 P5 P2 P6 P3 P7 Every 4 vertices form a quadrilateral

  40. OpenGL Drawing Functions glBegin (GL_QUADS_STRIP); glVertex2iv (p1); glVertex2iv (p2); glVertex2iv (p4); glVertex2iv (p3); glVertex2iv (p5); glVertex2iv (p6); glVertex2iv (p8); glVertex2iv (p7); glEnd(); P8 P1 P4 P5 P2 P6 P3 P7 The first 4 vertices form a quadrilateral. Every successive pair of vertices combine with the previous pair to form another quadrilateral

  41. OpenGL-Related Libraries • GLU (OpenGL Utility Library) • - Part of OpenGL • - Provides higher-level drawing routines such as • Spheres, NURBS, tessellators, quadric shapes, etc…

  42. OpenGL-Related Libraries • GLU (OpenGL Utility Library) • - Part of OpenGL • - Provides higher-level drawing routines such as • Spheres, NURBS, tessellators, quadric shapes, etc… • GLUT (OpenGL Utility Toolkit) - perform system-level I/O with the host operating system - cross platform • - portable windowing API • - not officially part of OpenGL

  43. GLUT: OpenGLUtility Toolkit • Application Structure • Configure and open window • Initialize OpenGL state • Register input callback functions • render • resize • input: keyboard, mouse, etc. • Enter event processing loop

  44. Sample Program void main( int argc, char* argv[]) { glutInit (&argc, argv); glutInitDisplayMode (GLUT_SINGLE | GLUT_RGB ); glutInitWindowSize (250, 250); glutInitWindowPosition (100, 100); glutCreateWindow ( "HELLO"); init(); glutDisplayFunc ( display ); glutMainLoop(); } /* OpenGL Initialization */ /* callback function */

  45. GLUT Callback Functions • Routine to call when something happens • window resized, user input, window needs drawing, etc… • “Register” callbacks with GLUT glutDisplayFunc( display ); glutKeyboardFunc( keyboard ); glutMouseFunc( mouse );

  46. Assignment 1 – Simple OpenGL/GLUT Application • Build a simple OpenGL/GLUT application • Designed to get you started using OpenGL and callbacks for interaction • Full description available on course webpage http://faculty.cs.tamu.edu/jchai/csce441_fall10

More Related