CS 174 Sec 1 Elements of Computer Graphics

1
CS 174 Sec 1 Elements of Computer Graphics

• TA Gianfranco Doretto

2
TA Office

• Place Boelter Hall 4428
• Time Monday 300 400 pm
• If you really cannot come during office hours,
  email me to schedule an appointment (my office is
  BH3811C)
• Email doretto_at_cs.ucla.edu
• Mailing-list cs174.1_at_seas.ucla.edu

3
Grading

• Midterm 20
• Final 20
• Lab 50
• 3 Lab project to turn in April 25, May 15
  (16?), June 6
• Class Participation 10

4
Lab Policies

• All the labs in this course are to be done
  individually. You can discuss the theory with
  other students, but the implementation,
  debugging, etc. has to be done strictly on an
  individual basis,
• Submit a README file with each lab, only if you
  are doing the extra credit stuff, or if you are
  doing something different from what is mentioned
  in the lab description handout. Also, mention
  what assumptions you have made to get your lab
  running,
• Late labs will be accepted at 10 of your grade
  penalty for each day it is late, to a max of 50.
  With this max penalty in effect, you are free to
  turn in your lab until the last day of the
  quarter.
• Everyone in this class should sign a academic
  honesty policy form and return it to the TA in
  the recitation meeting. No grade will be given to
  student who has not signed this agreement.
• Note The students programs will be checked and
  compared each other. If it is found that someone
  is cheating, both of you will be reported.

5
Laboratories

• Get a SEASnet account if you do not have it yet
  (go to 2567BH)
• Locations of the lab and hours, see
  http//www.seas.ucla.edu/seasnet/Docs/labs.html

6
Discussion Outline

• Lab Algorithm
• Lab FAQ
• Unclear Material
• Midterm/Final Sample Questions
• Questions / Discussion
• Anything helpful for your assignments

7
What is OpenGL

• Is a software interface to graphics hardware
• Core OpenGL 200 commands
• OpenGL Utility Library 50 commands
• Is hardware-independent dont need to work
  through whatever windowing system controls of the
  particular hardware youre using
• You must build up your desired model from a small
  set of geometric primitives points, lines, and
  polygons

8
How OpenGL render an Image?

• 4 steps
• I construct shapes from geometric primitives,
  thereby creating mathematical description of
  objects
• II arrange the objects in 3D space and select
  the desired vantage point for viewing the
  composed scene

9
How OpenGL render an Image?

• III calculate the colors of all the objects
  (explicitly assigned, lighting conditions,
  passing texture, combination)
• IV convert the mathematical description of
  objects and their associated color information to
  pixels on the screen (rasterization)

10
Example

• int main (int argc, char argv)
• //Inizializes a window on the screen
• glutInit(argc, argv)
• glutInitDisplayMode (GLUT_SINGLE GLUT_RGB)
• glutInitWindowSize (250, 250)
• glutInitWindowPosition (100, 100)
• glutCreateWindow ("Example1")
• init()
• glutDisplayFunc(display)
• glutMainLoop()
• return 0

11
Example

• include ltGL/glut.hgt
• include ltstdio.hgt
• include ltstdlib.hgt
• void init(void)
• //estblishes what color the window will be
  cleared to
• glClearColor(0.0, 0.0, 0.0, 0.0)
• //initialize viewing values
• glMatrixMode (GL_PROJECTION)
• glLoadIdentity()
• //specifies the coordinate system OpenGL assumes
  
• //as it draws the final image and how the
• //image gets mapped to the screen
• glOrtho(0.0,1.0,0.0,1.0,-1.0,1.0)

12
Example

• void display()
• //once the clearing color is set, the window is
  cleared
• //to that color whenever glClear() is called
• glClear(GL_COLOR_BUFFER_BIT)
• //establishes what color to use for drawing
  objects (white)
• glColor3f(1.0,1.0,1.0)
• //define the object to be drawn (polygon)
• glBegin(GL_POLYGON)
• //define the polygon's corner
• //(x,y,z) coordinates, the polygon is on the
  z0 plane
• 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()

13
Example

• glColor3f(1.0,0.0,0.0)
• //define the object to be drawn (line loop)
• glBegin(GL_LINE_LOOP)
• //define the polygon's corner
• //(x,y,z) coordinates, the polygon is on the
  z0 plane
• 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()
• //ensures that the drawing commands are actually
  executed
• //rather than stored in a buffer awaiting
  additional OpenGL commands
• glFlush()

14
Command Syntax

• Syntax observations (functions, constant, 3f
  suffix, glVertex2i(1,3) glVertex2f(1.0,3.0))
• glColor3f(1.0,0.0,0.0)
• GLfloat color_array1.0,0.0,0.0
• glColor3fv(color_array)

15
Geometric Primitives

• GL_POINTS
• GL_LINES
• GL_POLYGON
• GL_TRIANGLES
• GL_QUADS
• GL_LINE_STRIP
• GL_LINE_LOOP
• GL_TRIANGLE_STRIP
• GL_TRIANGLE_FAN
• GL_QUAD_STRIP

16
OpenGL as a State Machine

• OpenGL is a state machine
• You put it into various states that than remain
  in effect until you change them
• Examples of state variablescolor, current
  viewing, projection transformations, polygon
  drawing models, position and characteristics of
  light, material property of objects

17
OpenGL-Related libraries

• OpenGL have to use the underlying mechanisms of
  the windowing system
• There are several libraries that allow you to
  simplify your programming tasks
• I GLU (OpenGL Utility Library) lower-level
  commands
• II WGL routines (Windows) provide the Windows to
  OpenGL interface
• III GLUT (OpenGL Utility Toolkit) is a
  window-system-independent toolkit, to hide the
  complexities of differing window system APIs

18
Include Files

• include ltGL/gl.hgt needed for all applications
• include ltGL/glu.hgt for almost all applications
  is required
• include ltwindows.hgt Microsoft Windows require
  this (not recommended)
• include ltGL/glut.hgt if you are using GLUT for
  managing your window manager tasks (NOTE include
  glut.h and do not include gl.h and glu.h for
  portability)

19
GLUT, the OpenGL Utility Toolkit

• OpenGL is window system or operating system
  independent
• It contains no command for opening window or
  reading events from the keyboard or mouse. GLUT
  gives you these missing commands
• GLUT includes also several routines that create
  complicated 3D objects (glutSolidSphare()
  glutSolidCone() glutSolidTeapot()
  glutWireTorus() ) (NOTE also GLU has something)

20
GLUT Window Management

• glutInit(int argc, char argv) initializes GLUT
  and processes any command line arguments. Should
  be called before any other GLUT routine
• glutInitDisplayMode(unsigned int mode) specify
  RGBA or color-index color model single- or
  double-buffer depth buffer

21
GLUT Window Management

• glutInitWindowPosition(int x, int y) specifies
  the screen location for the upper-left corner of
  your window
• glutWindowSize(int width, int size) specifies the
  size, in pixels, of your window
• glutCreateWindow(char string) creates a window
  with an OpenGL context (NOTEuntil glutMainLoop()
  is called, the window is not yet displayed

22
The Display Callback

• glutDisplayFunc(void(func)(void)) is the first
  and most important callback function
• Whenever GLUT determines that the contents of the
  window need to be redisplayed, the callback
  function above is executed
• You should put all the routines you need to
  redraw the scene in the display callback function

23
Running the Program

• The very last thing you must do is call
  glutMainLoop(void)
• All windows that have been created are now shown,
  and rendering to those windows is now effective
• Once this loop is entered, it is never exited!

24
Handling Input Events

• Routines to register callback commands that are
  invoked when specified events occur
• glutReshapeFunc(void (func)(int w,int h))
  indicates what action should be taken when the
  window is resized

25
Handling Input Events

• glutKeyboardFunc(void (func) (unsigned char key,
  int x, int y)) and glutMouseFunc(void (func)
  (int button, int int state, int x, int y)) allow
  you to link a keyboard key or a mouse button with
  a routine thats invoked when the key or mouse
  button is pressed or released

26
Handling Input Events

• glutMotionFunc(void(func)(int x,int y))
  registers a routine to call back when the mouse
  is moved while a mouse button is also pressed

27
Managing a background Process

• You can specify a function thats to be executed
  if no other events are pending
• glutIdleFunc(void(func)(void)) this routine
  takes a pointer to the function as its only
  argument

28
Skeleton code

• Download skeleton.tar.gz to your SEAsnet Account
• Exact file by     gunzip skeleton.tar.gz
• tar -xvf
  skeleton.tar
• Change directory to skeleton by
• cd skeleton
• Compile the sample code by    make

29
Unix Basic Commands

• emacs emacs editor
• mkdir create a directory
• cd change directory
• ls list of files
• cp copy
• mv move and rename files
• rm delete files
• chmod change access to the files

30
Compiling

• Under Linux/Solaris (Makefile)
• gcc -o Example Example.c -lX11 -lGL -lGLU
  -lglut lm
• Under Windows (not recommended!)
• These libraries must be compiled
• Opengl32.lib
• Glu32.lib

31
Working without UNIX

• From Seas Labs
• do editing with VC
• ftp to ugrad.seas.ucla.edu
• Use Exceed3D to show graphics output
• From Home
• do editing with VC
• ftp to ugrad.seas.ucla.edu
• Use XWin32 to show graphics output
• (trial version downloadable at
  http//www.starnet.com/products/)
• Install your own linux system. Contact the Linux
  user group for help http//ww.linux.ucla.edu
  (Linux user group)