CSC3260 Principles of

Computer Graphics
Tutorial 1

Yang Rong
2003/01/15-16
 Outline
 Tutorial information
 Assignment 1 Overview
 What is OpenGL ?
 Why OpenGL ?
 How to program with openGL ?
 OpenGL Demo !
 Explanation more on B-spline
 TA Information
 Luo Guo ([email protected])
Office: SHB1026 (26098438)
 Albert Wang Jianqing (
[email protected])
Office: SHB1026 (26098438)
 Yang Rong ([email protected])
Office: SHB1026 (26098438)
 Wang Guangyu ([email protected])
Office: SHB1010 (26098427)
 Tutorial schedule

 OpenGL Programming (Week

2-9)
 Using OpenGL to develop
interactive 3D graphics
applications (Assignment 1 and 2)

 Animation Project (Week 10-?)

 Using animation software to
develop interesting, creative and
impressive animation (Last
assignment)
 Assignment 1 Overview

 You will have experience with

 Hierarchical model and data structure
 Matrix stacks
 Z buffer and hidden surface removal
 Handling keyboard events
 Familiar with animation in OpenGL
Hierarchical Models

Torso

Shoulders Hips

Left Right Left Right

upper arm upper arm upper leg upper leg

Left Right Left Right

forearm Forearm lower leg lower leg

Head Left foot Right foot

Demo
Reference Gallery
 What is OpenGL?

As a user…
 OpenGL is the 3D power
behind all of the incredible
3D graphics & effects you
see on TV, at the movies
and games…
 compelling 2D and 3D
graphics in broadcasting,
CAD/CAM/CAE,
entertainment, medical
imaging, virtual reality.
 What is OpenGL?
As a developer…
 A software interface to graphics hardware
 API for developing portable, interactive 2D and
3D graphics applications

Application
Application Program
Program

OpenGL
OpenGL API
API

Graphics
Graphics Hardware
Hardware
 Why OpenGL?
 delivers fast and complete 3D Voodoo
hardware acceleration
 makes real-time 3D effects TNT
possible
 is on every platform
GeForce

Unix
Unix
Mac
Mac
IRIX
IRIX
Linux
Linux Window
Window
 OpenGL Visualization
Pipeline
Geometry 2D/3D shapes

Translation, Rotation,
Transformation Projection…etc

Hidden Surface Removal,

Rasterization Shading,

Frame Buffer Screen Display

 OpenGL Overview
 What OpenGL does?
Specify the
Draw based on basic
graphics primitives environment
e.g. points, lines, e.g. Lighting
triangles & polygons

Render (draw the

Setup the
3D scene on a 2D
virtual camera
screen)
 OpenGL Overview
 What OpenGL (solely) doesn’t do?
 No high-level command to describe
complex object. (e.g. NURBs)
 No commands for performing
windowing events (e.g. mouse click or
key stroke).
To
To develop
develop anan interactive
interactive graphics
graphics
application,
application,
other
other OpenGL
OpenGL related
related utility
utility
libraries
libraries are
are required.
required.
 OpenGL Related Libraries

 OpenGL Utility Library (GLU)

 Higher level routines using a set of
basic OpenGL commands
 Auxilary Library (AUX)
 For simple GUI, event handling and
define some simple shape
 OpenGL Utility Toolkit Library
(GLUT)
 Similar to AUX but more powerful
OpenGL Demos!
 OpenGL Naming Convention
Routines with prefix gl are E.g.
defined in OpenGL, with OpenGL: glVertice,
glColor…
prefix glu are defined in
GLU: gluCylinder,
GLU,etc… gluSphere…
Name of GLUT: glutIdleFunc...
command
DataType
Suffi x Type in C OpenGL Type
glColor3f(...) b signed char GLbyte
s short GLshort
No. of i long GLint, GLsizei
parameter f float GLfloat
d double GLdouble
library ub unsigned char GLubyte
us unsigned short GLushort
ui unsigned long GLuint
 Co-ordinate System

y
(4,4,4)
y

x x

(4,0,4)
z
 OpenGL is a state machine

 OpenGL commands are immediately

executed functions which
 Direct a drawing action or
 Cause special effects

 One Particular state remains

unchanged until you change it by
various OpenGL commands
Color of objects drawn
 E.g. executing …
afterwards will become white until
glColor3f(1.0,1.0,1.0); another glColor is called
 Primitive Drawing in OpenGL
 To draw a set of points, lines, triangles or
polygon use glBegin & glEnd

glBegin(mode);
glBegin(mode);
glVertex3*(x0,
glVertex3*(x0,y0,
y0,z0);
z0);
glVertex3*(x1,
glVertex3*(x1,y1,
y1,z1);
z1);
……
glEnd();
glEnd();

mode can be
GL_POINTS, GL_LINES, GL_POLYGON, GL_TRINGLES,
GL_LINE_STRIP, GL_LINE_LOOP, GL_QUADS,
GL_QUADS_STRIP, GL_TRIANGLE_STRIP, GL_TRIANGLE_FAN
 Sample OpenGL commands

DrawLines(){
DrawLines(){
glColor3f(1.0,0.0,0.0);
glColor3f(1.0,0.0,0.0);
glBegin(GL_LINE_STRIP)
glBegin(GL_LINE_STRIP)
(0.0,100.0) (100.0,100.0)
glVertex2f(0.0,
glVertex2f(0.0, 0.0);
0.0);
glVertex2f(100.0,
glVertex2f(100.0, 0.0);
0.0);
glVertex2f(100.0,
glVertex2f(100.0,
100.0);
100.0);
glVertex2f(0.0,
glVertex2f(0.0, 100.0);
100.0);
glEnd();
glEnd(); (0.0,0.0) (100.0,0.0)
}}
 Using GLUT !

 the OpenGL Utility Toolkit (GLUT)

 A window system independent toolkit for
writing OpenGL programs.
 Window creating, window destroying and
event handling which are not included in
OpenGL.
 Create more compicated 3-D objects, such as a
sphere, a torus, a teapot…
 Download GLUT for Win32 http://
www.xmission.com/~nate/glut.html
 Initialize a Window
Initialize GLUT and process any command
#include
#include <glut.h>
<glut.h> line arguments, be called first
void
void main(int
main(int argc,
argc, char
char **argv){
**argv){ Specify color model, buffer
glutInit(&argc,
glutInit(&argc, &argv);
&argv);
glutInitDisplayMode(GLUT_RGB|GLUT_DEPT);
glutInitDisplayMode(GLUT_RGB|GLUT_DEPT);
glutInitWindowSize(250,250);
glutInitWindowSize(250,250); the size in pixel of your window
glutInitWindowPosition(100,100);
glutInitWindowPosition(100,100); Screen location for the upper-
left corner of your window
glutCreateWindow(“Hello”);
glutCreateWindow(“Hello”);

init();
init(); Initialize environment settings

glutDisplayFunc(display); Most important event

glutDisplayFunc(display);
callback function
glutMainLoop();
glutMainLoop();
}}
go into forever looping after
callback functions are
registered
 GLUT CALLBACK Functions
 handle reshape event
 e.g. glutReshape(reshape);
 "When the user resizes the
window, call function reshape( )”

 draw the scene whenever the

window is created, moved…
etc
 e.g. glutDisplayFunc(display);
 "Whenever the window needed
redraw, call the function display(
);”
 GLUT CALLBACK Functions
 handle keyboard input event
 e.g.
glutKeyboardFunc(keyboard);
 "When any key is pressed, call
the function keyboard( )"

 Handle idle state

 e.g. glutIdleFunc(idle);
 "When the program is idle (no
events), call the function idle( ) ”
 Important for real-time animation!!
 Drawing GLUT objects

 GLUT objects are drawn in one sentence

glutWireCube
glutSolidSphere(2,
glutSolidSphere(2, 10,
10, 10);
10);
glutSolidSphere

Radiu
s Stacks
(latitude)
glutSolidSphere(2, 10, 10);
Slices
GLUT GLUT (longitude)
flavors object
 More on B-spline
Qi(u): i-th segment in a B-spline. Control Points ： Pi, Pi+1, Pi+2, Pi+3
Qi+1(u): i+1-th segment in a B-spline. Control Points ： Pi+1, Pi+2, Pi+3, Pi+4

Pi+1 Pi+2 Pi+4 3

Qi (u)PikBk (u).
Qi+1(u) k0
Qi(u) 3

Pi
Qi(0) Qi(1) Qi+1(0) Qi+1(1) Qi1(u)   Pi1k Bk (u).
Pi+3 i0

 Seek the set of basis function Bk(u) such that C0, C1, and C2 continuity

between the end of Qi(u) and3the start of Qi+1(u).


B0 ( u )  (1 u ) ; Qi (u)  Pi B0 (u)  Pi 1 B1 (u)
6
Q i (1)  Q i 1 ( 0 ); 3 u 3
 6u 2  4
B1 ( u )  ;  Pi 2 B2 (u)  Pi 3 B3 (u)
Q i (1)  Q i1 ( 0 ); 6
 3 u 3
 3 u 2
 3u  1  1 3  3 1  Pi 
Q i(1)  Q i1 ( 0 ). B2 ( u )  ;  6   
6 3 3 0 P
B0(u)B1(u)B2(u)B3(u ) B3 (u )  u 3
. 6

1 3 2
 u u u 1 
 3  0 3 0
 i 1 
 Pi 2 
6    
1 4 1 0  Pi 3 
 The End

 In next tutorial, you’ll learn

 OpenGl Transformation
 Display List
 Matrix Stacks
 Answer question about Assignment 1 if you
have
…