1. CSCE 441: Computer Graphics
Jinxiang Chai

2. Staff Instructor Dr. Jinxiang Chai http://faculty.cs.tamu.edu/jchai/
HRBB 527D
Office Hours: MW 3:00pm-4:00pm, (or by appointment) TA
Donghui Han
ETB 2016
Office Hours: Tuesday: 3:00-5:00pm. Thursday: 10am-12:00pm

3. Websites & Emails Course Page
ATTN: contact both instructor & TA when sending us an !
3/46

4. Why did you take this class?

5. Games
5/46 5

6. Movies

7. Visualization

8. Industrial Design

9. Interaction Techniques

10. Real World Modeling

11. 3D Printing

12. Visual Data Processing12

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

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

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

16. First Homework Assignment!
Linear Algebra Test
Complete within the first month (Sep 30, 2015)
Take as many times as you like
Must get at least 90% correct
Grade = ActualGrade * (exam 90% ? 1 : 0 )

17. Other Assignments Simple GLUT/OpenGL Application (today)
Polygon Drawing and Clipping
Modeling and View Transform
Hierarchical models
Hidden Surfaces, Texture mapping and Shadings
Ray Tracing
Motion Capture, KeyframeAnimation, & FK/IK

18. 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)

19. More on Assignments
Unless specifically stated otherwise, all assignments are to be done on your own, unless specified otherwise
If you are unsure of whether a type of cooperation is appropriate, check with the instructor or TA first.
We have a tool to detect the similarity between your code and database code, including code downloaded from the Internet and code of all the students from the past years.

20. Grading
60% Assignments
15% Midterm
25% Final

21. Late Policy Penalty = m: number of minutes late percentage penalty
days late
21/46 21

22. Required Textbooks

23. Suggested Reading

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

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

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(); }
GL_COLOR_BUFFER_BIT is an OpenGL symbolic constant specifying that it is the bit values in the color buffer that are to be set to the value indicated in the glClearColor function.
This statement clears the color buffer, so that the screen will start blank.

27. 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(); }
GL_COLOR_BUFFER_BIT is an OpenGL symbolic constant specifying that it is the bit values in the color buffer that are to be set to the value indicated in the glClearColor function.

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(); }
Clears the screen
GL_COLOR_BUFFER_BIT is an OpenGL symbolic constant specifying that it is the bit values in the color buffer that are to be set to the value indicated in the glClearColor function.

29. 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(); }
Sets the current drawing color to white
GL_COLOR_BUFFER_BIT is an OpenGL symbolic constant specifying that it is the bit values in the color buffer that are to be set to the value indicated in the glClearColor function.

30. 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(); }
Sets the window coordinates to (0,0,-1) – (1,1,1)
glOrtho describes a transformation that produces a parallel projection.

31. 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(); }
GL_COLOR_BUFFER_BIT is an OpenGL symbolic constant specifying that it is the bit values in the color buffer that are to be set to the value indicated in the glClearColor function.
Starts drawing a polygon

32. 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(); }
GL_COLOR_BUFFER_BIT is an OpenGL symbolic constant specifying that it is the bit values in the color buffer that are to be set to the value indicated in the glClearColor function.
Specifies the vertices of the polygon

33. 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(); }
GL_COLOR_BUFFER_BIT is an OpenGL symbolic constant specifying that it is the bit values in the color buffer that are to be set to the value indicated in the glClearColor function.
Ends the polygon

34. 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(); }
GL_COLOR_BUFFER_BIT is an OpenGL symbolic constant specifying that it is the bit values in the color buffer that are to be set to the value indicated in the glClearColor function.
Flushes all commands to ensure polygon is drawn

35. OpenGL Command Formats
glVertex3fv( v )
Prefix
Initial capital letters
Number of
components
Data Type
Vector
Gl specifies the opengl library
Vertex is the name of the function that renders a 3D point (or a vertex)
3: is the number of parameters
F is data type
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)

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

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

38. 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
Each pair of vertices creates a line P2 P3

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

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

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

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

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

44. OpenGL Drawing Functions
glBegin (GL_TRIANGLES_FAN);
glVertex2iv (p1);
glVertex2iv (p2);
glVertex2iv (p3);
glVertex2iv (p4);
glVertex2iv (p5);
glVertex2iv (p6);
glEnd(); P6 P5 P1 P4
This first vertex specifies your main vertex. Every following pair of vertices are used along with the main vertex to form a triangle. 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.

45. 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
Every 4 vertices form a quadrilateral P2 P6 P3 P7
Every 4 vertices form a quadrilateral

46. 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
The first 4 vertices form a quadrilateral. Every successive pair of vertices combine with the previous pair to form another quadrilateral 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

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

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

49. 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
49/46 49

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

51. 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 */

52. 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 );
This specifies the function that needs to be called when the window is redrawn.

53. Assignment 1 – Simple OpenGL/GLUT Application
Build a simple OpenGL/GLUT application
Designed to get you started using OpenGL and callbacks for interaction
Due by 9/8/2015
Full description available on course webpage