CSCE 441: Computer Graphics Jinxiang Chai

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

Websites & Emails Course Page http://faculty.cs.tamu.edu/jchai/csce441_2015fall ATTN: contact both instructor & TA when sending us an email! 3/46

Why did you take this class?

Games 5/46 5

Movies

Visualization

Industrial Design

Interaction Techniques

Real World Modeling

3D Printing

Visual Data Processing 12

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

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

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

First Homework Assignment! Linear Algebra Test http://projects.cs.tamu.edu/keyser/LAtest/ 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 )

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

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)

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.

Grading 60% Assignments 15% Midterm 25% Final

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

Required Textbooks

Suggested Reading

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

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

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.

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.

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.

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.

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.

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

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

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

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

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)

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

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.

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

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.

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

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.

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

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.

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.

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

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

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

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

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

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

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

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.

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 http://faculty.cs.tamu.edu/jchai/csce441_2015fall