Computer Graphics CSCE 441

1

Dr. Scott Schaefer

Computer Graphics CSCE 441

2/46

Staff

Instructor Dr. Scott Schaefer HRBB 527B Office Hours: T 2-3pm, R 8:30-9:30am

(or by appointment) TA

Donghui Han ETB 2016 Office Hours: M 1-3pm, W 10am-noon

Websites

Course Pagehttp://courses.cs.tamu.edu/schaefer/441_Fall2014

Piazza Discussion Board

http://piazza.com/tamu/fall2014/csce441/home

3/46

4/46

Why did you take this class?

5/46

Games

6/46

Movies

7/46

Visualization

8/46

Industrial Design

9/46

What will you learn in this class?

2D Graphics Drawing lines, polygons Fractals

3D Graphics Transformations Lighting Ray Tracing Solid Modeling Splines/Subdivision

10/46

What you’re expected to know

Programming ExperienceAssignments in C/C++

Simple Mathematics

Graphics is mathematics made visible

11/46

How much math?

General geometry/linear algebra Matrices

Multiplication, inversion, determinant Vectors

Dot product, cross product, linear independence

12/46

First Homework Assignment!

Linear Algebra Test

http://projects.cs.tamu.edu/keyser/LAtest/

Complete before September 17, 2014 Take as many times as you like Must get at least 90% correct

Grade = ActualGrade * (exam 90% ? 1 : 0 )

13/46

Other Assignments

Simple Painting Program Polygon Drawing Fractals and Iterated Affine Transformations 3D Rasterization and Hidden Surfaces Ray Tracing

14/46

More on Assignments

Turn in code via CSNET

(get an account if you don’t already have one) Due by 11:59pm on day specified Code, solution file, proj file and Win32

executable Make your code readable (comment) You may discuss concepts, but coding is

individual (no “team coding” or web)

15/46

Grading

60% Assignments 15% Midterm 25% Final

16/46

Late Policy

Penalty = m: number of minutes late

days late

perc

enta

ge p

enal

ty%6.57

m

17/46

Textbooks

18/46

Suggested Reading

19/46

Introduction to OpenGL

What is OpenGL? Computer-graphics API (application

programming interface) Developed by SGI in 1992 Efficient, streaming interface 250+ function calls for drawing 2D and 3D graphics Hardware independent Operating system independent Direct3D alternative API from Microsoft

20/46

Introduction to OpenGL

What OpenGL is NOTNo commands for windowingNo commands for obtaining user inputNo commands for anything except

drawing on the screen

21/46

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

22/46

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 color for clearing the screen

23/46

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

24/46

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

25/46

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)

26/46

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

27/46

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

28/46

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

29/46

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

30/46

OpenGL Command Formats

glVertex3fv( v )

Number ofcomponents

2 - (x,y) 3 - (x,y,z)4 - (x,y,z,w)

Data Typeb - byteub - unsigned bytes - shortus - unsigned shorti - intui - unsigned intf - floatd - double

Vector

omit “v” forscalar form

glVertex2f( x, y )

PrefixInitial capital letters

31/46

OpenGL Geometric Primitives

All geometric primitives are specified by vertices

GL_QUAD_STRIPGL_QUAD_STRIP

GL_POLYGONGL_POLYGON

GL_TRIANGLE_STRIPGL_TRIANGLE_STRIP

GL_TRIANGLE_FANGL_TRIANGLE_FAN

GL_POINTSGL_POINTSGL_LINESGL_LINES

GL_LINE_LOOPGL_LINE_LOOPGL_LINE_STRIPGL_LINE_STRIP

GL_TRIANGLESGL_TRIANGLES

GL_QUADSGL_QUADS

32/46

OpenGL Drawing Functions

glBegin (GL_POINTS);glVertex2iv (p1);glVertex2iv (p2);glVertex2iv (p3);glVertex2iv (p4);glVertex2iv (p5);glVertex2iv (p6);

glEnd();

P1

P2 P3

P4

P5P6

33/46

OpenGL Drawing Functions

glBegin (GL_LINES);glVertex2iv (p1);glVertex2iv (p2);glVertex2iv (p3);glVertex2iv (p4);glVertex2iv (p5);glVertex2iv (p6);

glEnd();

P1

P2 P3

P4

P5P6

34/46

OpenGL Drawing Functions

glBegin (GL_LINE_STRIP);glVertex2iv (p1);glVertex2iv (p2);glVertex2iv (p3);glVertex2iv (p4);glVertex2iv (p5);glVertex2iv (p6);

glEnd();

P1

P2 P3

P4

P5P6

glBegin (GL_LINE_LOOP);glVertex2iv (p1);glVertex2iv (p2);glVertex2iv (p3);glVertex2iv (p4);glVertex2iv (p5);glVertex2iv (p6);

glEnd();

35/46

OpenGL Drawing Functions

P1

P2 P3

P4

P5P6

36/46

OpenGL Drawing Functions

glBegin (GL_POLYGON);glVertex2iv (p1);glVertex2iv (p2);glVertex2iv (p3);glVertex2iv (p4);glVertex2iv (p5);glVertex2iv (p6);

glEnd();

P1

P2 P3

P4

P5P6

glBegin (GL_TRIANGLES);glVertex2iv (p1);glVertex2iv (p2);glVertex2iv (p6);glVertex2iv (p3);glVertex2iv (p4);glVertex2iv (p5);

glEnd();

37/46

OpenGL Drawing Functions

P1

P2 P3

P4

P5P6

38/46

OpenGL Drawing Functions

glBegin (GL_TRIANGLES_STRIP);glVertex2iv (p1);glVertex2iv (p2);glVertex2iv (p6);glVertex2iv (p3);glVertex2iv (p5);glVertex2iv (p4);

glEnd();

P1

P2 P3

P4

P5P6

39/46

OpenGL Drawing Functions

glBegin (GL_TRIANGLES_FAN);glVertex2iv (p1);glVertex2iv (p2);glVertex2iv (p3);glVertex2iv (p4);glVertex2iv (p5);glVertex2iv (p6);

glEnd();

P1

P2 P3

P4

P5P6

40/46

OpenGL Drawing Functions

glBegin (GL_QUADS);glVertex2iv (p1);glVertex2iv (p2);glVertex2iv (p3);glVertex2iv (p4);glVertex2iv (p5);glVertex2iv (p6);glVertex2iv (p7);glVertex2iv (p8);

glEnd();

P1

P2P3

P4 P5

P6P7

P8

41/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();

P1

P2P3

P4 P5

P6P7

P8

42/46

OpenGL-Related Libraries

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

43/46

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

44/46

GLUT: OpenGL Utility Toolkit

Application StructureConfigure and open window Initialize OpenGL stateRegister input callback functions

renderresizeinput: keyboard, mouse, etc.

Enter event processing loop

45/46

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

46/46

GLUT Callback Functions

Routine to call when something happenswindow resized, user input, window needs

drawing, etc… “Register” callbacks with GLUT

glutDisplayFunc( display );glutIdleFunc( idle );glutKeyboardFunc( keyboard );glutMouseFunc( mouse );

47/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 webpagehttp://courses.cs.tamu.edu/schaefer/441_Fall2014