2IV10/2IV60 Computer graphics set 1 - Introduction
Jack van Wijk TU/e
2IV60 Computer graphics
Aim: Knowledge basic concepts 2D en 3D computer graphics Able to implement a 3D graphics application
Topics 2IV60
1. 2. 3. 4. 5. 6. 7. Introduction Basic math for graphics Transformations ju Viewing Geometric modeling Shading and illumination Visible surfaces
Organizational matters
2IV10 / 2IV60 Lectures and instructions Exercises and assignments Exam
2IV60 / 2IV10
Generation 2012 (2IV60):
Do everything
Generation 2011 (2IV10):
Only exam, no assignment
Generation 2010 and earlier (2IV10):
Either only exam, or exam + old assignment
2IV10
Option for generation 2011 and earlier: Follow 2IV60 instead of 2IV10. + 5 ECTS instead of 3. + Much more insight More work Decide at last November 23 if you want to switch.
See appendix B of the Study Guide
Lectures
16 lectures of two hours (max.)
Overview of material Details (esp. algorithms, math.) Elaboration home-work exercises Questions! Demos
Home-work exercises
Each week a new set Voluntarily, but recommended Check if things are understood Explanation later in lecture Preparation for exam (60%) Grade for exam should be at least 5.0 to pass
Instructions
16 instructions (max.)
Kasper Dinkla, Stef van den Elzen, Andrei Jalba, Roeland Scheepens, Huub van de Wetering + student assistants Assignments and home-work exercises Questions!
Assignments
Modeling and visualizing moving robots
Assignments
Modeling and visualizing moving robots Java + OpenGL Three rounds Deadlines: after week 3, 5, and 7: 3/12/2012, 17/12/2012, 14/1/2013. To be done in pairs Submit: source code via Peach Judged: problem solved + explanation in comment source code 40% of final result
Course material
Book:
Donald Hearn, M. Pauline Baker, Warren Carithers. Computer Graphics with OpenGL, 4th edition, Pearson Prentice Hall, paperback.
Study guide Slides Homework exercises and answers Oase.tue.nl
Questions?
Ok, lets have an overview of computer graphics
Why computer graphics?
Fun! Visible! Everywhere Visual system offers:
Parallel input Parallel processing
Computer graphics: ideal for humancomputer communication
Applications
Graphs and charts Computer-Aided Design Virtual Reality Data Visualization Education and training Computer Art Movies Games Graphical User Interfaces
H&B 1:2-32
Business graphics
H&B 1:2-32
Computer-Aided Design
AutoDesk IAME 2-stroke race kart engine
Visualization
Scientific visualization
Clip: Golden Age of Scientific Computing http://www.sci.utah.edu/
H&B 1:2-32
Gaming
H&B 1:2-32
expression
depth of field
Movies
fracture
motion
water
reflection
hair
H&B 1:2-32
Hardware
Fast development History: see book Now: Graphics Processing Unit (GPU), LCD-screen
Beyond the laptop screen
Microsoft Surface Apple iPad
Beyond the laptop screen
24 screen configuration, Virginia Tech
Gigapixel display 50 LCD touchscreens
Beyond the laptop screen
Head mounted displays
Parachute trainer US Navy
Beyond the laptop screen
Roll-up screen, Philips
Schematic
Model Display Image
interaction
User
Also
Computer Graphics
Model
Pattern Recognition
Image
Image Processing
Schematic
Model Display Image
interaction
User
From model to image
Model World View NDC Display
Graphics pipeline
Coordinates and transformations
H&B 3-1:60-61
From model to image
Model World View NDC Display
Cylinder:
x2 y2 r 2 0 zh
Local or modeling coordinates Geometric modeling
H&B 3-1:60-61
From model to image
Model World View NDC Display
Position cylinders in scene: World coordinates
H&B 3-1:60-61
From model to image
Model World View NDC Display
Look at cylinders: Viewing coordinates
Visible surfaces, shading
H&B 3-1:60-61
From model to image
Model World View NDC Display
Display:
1
Normalized Device Coordinates
H&B 3-1:60-61
From model to image
Model World View NDC Display
Display on screen:
0 1024
Device Coordinates
768
Interaction
H&B 3-1:60-61
Generating graphics
Special-purpose programs
Photoshop, Powerpoint, AutoCAD, StudioMax, Maya, Blender, PovRay,
General graphics libraries and standards
Windows API, OpenGL, Direct3D,
H&B 3-2:61-62
CG standards
Set of graphics functions, to be called from programming language Access to and abstract from hardware Standardization
Fortran, Pascal, C, C++, Java, Delphi, CG API Drivers
Display
Input dev.
1975
Display
Input dev.
2000
Functions
Graphics Output Primitives
Line, polygon, sphere,
Attributes
Color, line width, texture,
Geometric transformations
Modeling, Viewing
Shading and illumination Input functions
H&B 3-2:61-62
Software standards
GKS, PHIGS, PHIGS+ (1980-) GL (Graphics Library, SGI) OpenGL (early 1990s) Direct3D (MS), Java3D, VRML,
H&B 3-3:62-63
OpenGL
3D (and 2D) Fast Hardware, language, OS, company independent OpenGL architecture review board Broad support Low-level (right level!) Standard graphics terminology
H&B 3-5:64-72
Intro OpenGL
Few basic principles No detailed questions asked at exam Needed for assignments Here: OpenGL 1.1
H&B 3-5:64-72
More info on OpenGL
http://www.opengl.org, http://www.opengl.org/sdk/docs/man2/ The Red Book: http://www.glprogramming.com/red/ Many other web-sites No need to learn by head, aim at being able to read manual pages
OpenGL, GLU and GLUT
OpenGL: basic functions GLU: OpenGL Utility library: GLUT: OpenGL Utility Toolkit library
GLU and GLUT:
Handy functions for viewing and geometry
H&B 3-5:64-72
OpenGL and Java
C: glFunction();
Java: JOGL
gl.glFunction(); glu.gluFunction(); glut.glutFunction();
gluFunction(); glutFunction();
No windowing functions offered by JOGL Assignment: skeleton offered
OpenGL syntax
Functions:
glFunction: glBegin, glClear, glVertex,
Constants:
GL_CONSTANT: GL_2D, GL_LINE
Datatypes:
GLtype: GLbyte, GLint, GLfloat
H&B 3-5:64-72
Example
Example
glClearColor(1.0,1.0,1.0,0.0);// Background color glMatrixMode(GL_PROJECTION); // Set transformation glLoadIdentity; gluOrtho2D(0, 200, 0, 150);
glClear(GL_COLOR_BUFFER_BIT); // Clear background
glColor3f(1.0, 0.0, 0.0); glBegin(GL_LINES); glVertex2i(180, 15); glVertex2i(10, 145); glEnd; glFlush; // // // // // // Set color to red Draw line - first point - second point Ready with line Send
H&B 3-5:64-72
Example
Example 3D
Quick, minimal example Lots of jargon and new material Motivate studying theory Enable quick start assignment
Here: viewing and modeling transformations
H&B 3-5:64-72
Example 3D
Aim: Draw two rectangular boxes
1. Set up viewing transformation 2. Specify the colors 3. Draw the objects
Example 3D
// Set up viewing transformation glViewport(0, 0, 500, 500); // Select part of window
glMatrixMode(GL_PROJECTION); // Set projection glLoadIdentity(); glFrustum(-1.0, 1.0, -1.0, 1.0, 4.0, 20.0); glMatrixMode(GL_MODELVIEW); glLoadIdentity(); gluLookAt(3.0, 6.0, 5.0, 1.0, 0.0, 0.0, 0.0, 0.0, 1.0); // Set camera - eye point - center point - up axis
Example 3D
// Clear background glClearColor(1.0,1.0,1.0,0.0);// Background color glClear(GL_COLOR_BUFFER_BIT); // Clear background
// Set color
glColor3f(0.0, 0.0, 0.0); // Set color to black
Example 3D
// Draw two rectangular boxes glutWireCube(1.0); // unit box around origin glTranslatef(2.0, 0.0, 0.0); // move in x-direction glRotatef(30, 0.0, 0.0, 1.0); // rotate 30 degrees around z-axis glScalef(1.0, 1.0, 2.0); // scale in z-direction
glutWireCube(1.0); // translated, rotated, scaled box
Example 3D
glutWireCube(1.0); // unit box around origin glTranslatef(2.0, 0.0, 0.0); // move in x-direction glRotatef(30, 0.0, 0.0, 1.0); // rotate 30 degrees around z-axis glScalef(1.0, 1.0, 2.0); // scale in z-direction glutWireCube(1.0); // translated, rotated, scaled box
Note: Objects are drawn in the current local axis-frame; With transformations this frame can be changed.
Next
Have fun with the first assignments
Next lectures:
Basic math 2D and 3D transformation 2D and 3D viewing
