CSE 494/598

Intro to Applied Computer Graphics

Anshuman RazdanDCST

razdan@asu.eduAR's Web Page

http://dcst2.east.asu.edu/~razdan

2Anshuman Razdan based on Peter Wonka's Slides

Disclaimer

These slides can only be used as study material for the at ASUThe slides cannot be distributed or used for another purposeThe slides may contain errors

OpenGL Part 1

Introduction to OpenGL and GLUT: Part I

4Anshuman Razdan based on Peter Wonka's Slides

What Is OpenGL?

high-quality color images composed of geometric and image primitives

window system independent

operating system independent

No high-level commands for describing models of three-dimensional objects

The OpenGL Utility Library (GLU) provides many of the modeling features, such as quadric surfaces and NURBS curves and surfaces

Graphics rendering API

5Anshuman Razdan based on Peter Wonka's Slides

Some History

Web site: www.opengl.orgOpenGL is a registered trademark, owned by Silicon Graphics (SGI)OpenGL is controlled by the “ARB: Architecture Review Board”. Members include SGI, Microsoft, HP, IBM, ATI, apple, Intel …1977, Jim Clark writes –LDS for E&S Multi Picture System1990, OpenGL development begins1992, OpenGL 1.0 completed, OpenGL course at SIGGRAPH’92OpenGL 1.1(1995); OpenGL 1.2 (1998) …Today: OpenGL 2.0

6Anshuman Razdan based on Peter Wonka's Slides

OpenGL Libraries

OpenGL core library (GL)OpenGL32 on WindowsGL on most UNIX / LINUX systems (libGL.a)

OpenGL Utility Library (GLU)#include <GL/gl.h>#include <GL/glu.h>Provides functionality in OpenGL core but avoids having to rewrite code

OpenGL Utility Toolkit (GLUT)#include <GL/glut.h>Provides functionality common to all window systems

Open a windowGet input from mouse and keyboardMenusEvent-driven

Code is portable but GLUT lacks the functionality of a good toolkit for a specific platform

7Anshuman Razdan based on Peter Wonka's Slides

OpenGL and Related APIs

GLUT

GLU

GL

GLX, AGLor WGL

X, Win32, Mac O/S

software and/or hardware

application program

OpenGL Motifwidget or similar

8Anshuman Razdan based on Peter Wonka's Slides

OpenGL as a Render

Geometric primitivespoints, lines and polygons

Image Primitivesimages and bitmaps

separate pipeline for images and geometry

linked through texture mapping

Rendering depends on statecolors, materials, light sources, etc.

9Anshuman Razdan based on Peter Wonka's Slides

OpenGL Syntax

functions have prefix gl and initial capital letters for each word

glClearColor(), glEnable(), glPushMatrix() …glu for GLU functions

gluLookAt(), gluPerspective() …constants begin with GL_, use all capital letters

GL_COLOR_BUFFER_BIT, GL_PROJECTION, GL_MODELVIEW …

Extra letters in some commands indicate the number and type of variables

glColor3f(), glVertex3f() …OpenGL data types

GLfloat, GLdouble, GLint, GLenum, …

10Anshuman Razdan based on Peter Wonka's Slides

OpenGL Geometric Primitives

All geometric primitives are specified by vertices, and put between the construct glBegin(mode) and glEnd().

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

11Anshuman Razdan based on Peter Wonka's Slides

OpenGL Function Format

glVertex3fv( glVertex3fv( vv ) )

Number ofNumber ofcomponentscomponents

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

Data TypeData Typeb - byteb - byteub - unsigned byteub - unsigned bytes - shorts - shortus - unsigned shortus - unsigned shorti - inti - intui - unsigned intui - unsigned intf - floatf - floatd - doubled - double

VectorVector

omit “v” foromit “v” forscalar formscalar form

glVertex2f( x, y )glVertex2f( x, y )

12Anshuman Razdan based on Peter Wonka's Slides

OpenGL Drawing Attributes

Besides glVertex() commands, other attributes commands can also be used between glBegin() and glEnd(), e.g. glColor3f().

There are more drawing attributes than colorPoint size: glPointSize()

Line width: glLinewidth()

Dash or dotted line: glLineStipple()

Polygon pattern: glPolygonStipple()

…

13Anshuman Razdan based on Peter Wonka's Slides

Simple Example

GLUT: OpenGL Utility Toolkit

15Anshuman Razdan based on Peter Wonka's Slides

GLUT: OpenGL Utility Toolkit

GLUT provide a portable API for creating window and interacting with I/O devices

Application StructureConfigure and open window

Initialize OpenGL state

Register input callback functions

render

resize

input: keyboard, mouse, etc.

Enter event processing loop

16Anshuman Razdan based on Peter Wonka's Slides

Prequisites for GLUT

Glut.h – in your include pathGlut32.lib (for windows) in your library pathGlut32.dll in system pathFor OpenGL calls

Gl.h and glu.h (included by glut.h)Opengl32.lib and glu32.libOpengl32.dll and glu32.dll

17Anshuman Razdan based on Peter Wonka's Slides

GLUT Window Setup

glutInit (&argc, argv)Glut initialization

glutCreateWindow (“OpenGL Example”)Create a display window with a title

glutDisplayFunc ( myDisplay )Specify what the display window is to contain

glutMainLoop ()Activate the display window and its graphic content

glutInitDisplayMode (GLUT_SINGLE | GLUT_RGB | …)Set other initial options for the display window

glutInitWindowPosition (int x, int y) & glutInitWindowSize (int width, int height )

An Initial display window location (top-left corner) and size

18Anshuman Razdan based on Peter Wonka's Slides

Example I

500

500

(0.5,0.5)

(-0.5,-0.5)

19Anshuman Razdan based on Peter Wonka's Slides

main() Function

int main(int argc, char** argv){ // glut init glutInit(&argc, argv); glutInitDisplayMode (GLUT_SINGLE | GLUT_RGB); // actual window size glutInitWindowSize(500,500); // initial window location, top-left corner glutInitWindowPosition(0,0); // create window with title “simple” glutCreateWindow("simple"); // call mydisplay() function glutDisplayFunc(mydisplay); // call init() function init(); // main event loop, do not use exit() glutMainLoop();}

20Anshuman Razdan based on Peter Wonka's Slides

Init() Function

void init(){

glClearColor (0.0, 0.0, 0.0, 1.0); // black clear color, opaque window

glColor3f(1.0, 1.0, 1.0); // white

glMatrixMode (GL_PROJECTION); glLoadIdentity ();

glOrtho2D(-1.0, 1.0, -1.0, 1.0); // screen size (-1.0,-1.0) to (1.0,1.0) }

21Anshuman Razdan based on Peter Wonka's Slides

display() Function

void mydisplay(){ glClear(GL_COLOR_BUFFER_BIT); // clear the window glBegin(GL_POLYGON); // fill connected polygon

glVertex2f(-0.5, -0.5); // vertices of the square glVertex2f(-0.5, 0.5); glVertex2f(0.5, 0.5); glVertex2f(0.5, -0.5);

glEnd();}

22Anshuman Razdan based on Peter Wonka's Slides

Callbacks

Virtually all interactive graphics programs are event driven

Glut uses callbacks to handle eventsWindows system invokes a particular procedure when an event of particular type occurs.

MOST IMPORTANT: display event

Signaled when window first displays and whenever portions of the window reveals from blocking window

glutDisplayFunc(void (*func)(void)) registers the display callback function

23Anshuman Razdan based on Peter Wonka's Slides

More Callbacks

glutReshapeFunc(void (*func)(int w, int h)) indicates what action should be taken when the window is resized.

glutKeyboardFunc(void (*func)(unsigned char key, int x, int y)) glutMouseFunc(void (*func)(int button, int state, int x, int y)) allow you to link a keyboard key or a mouse button with a routine that's invoked when the key or mouse button is pressed or released.

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.

glutIdleFunc(void (*func)(void)) registers a function that's to be executed if no other events are pending – use for animation or continuous update

Projection and Viewport

25Anshuman Razdan based on Peter Wonka's Slides

Projection and Clipping Window

26Anshuman Razdan based on Peter Wonka's Slides

Viewing – The Camera Analogy

Position the camera ( Viewing transformation)

Arrange the scene to a desired composition (Modeling transformation)

Choose the lens and zoom ( Projection transformation)

Determine the size of the photograph (Viewport transformation)

27Anshuman Razdan based on Peter Wonka's Slides

Stages of Vertex Transformation

28Anshuman Razdan based on Peter Wonka's Slides

Viewing/Modeling Transformation

Projection transformationsadjust the lens of the camera

Viewing transformationstripod–define position and orientation of the viewing volume in the world

Modeling transformationsmoving the model

Viewport transformationsenlarge or reduce the physical photograph

29Anshuman Razdan based on Peter Wonka's Slides

Matrix Stack

Specify Current Matrix Stack

glMatrixMode( glMatrixMode( GL_MODELVIEWGL_MODELVIEW or or GL_PROJECTIONGL_PROJECTION ) )Other Matrix or Stack OperationsglLoadIdentity()glLoadIdentity()glPushMatrix()glPushMatrix()glPopMatrix()glPopMatrix()

Viewportusually same as window size

viewport aspect ratio should be same as projection transformation or resulting image may be distorted

glViewport( glViewport( x, y, width, heightx, y, width, height ) )

30Anshuman Razdan based on Peter Wonka's Slides

Viewing/Modeling Transformation

Viewing transformation can be specified using the command

gluLookAt (eyex, eyey, eyez,atx, aty, atz,upx, upy, upz )

gluLookAt ( ) encapsulates a series of rotation and translation commands and is used.

Modeling transformation can be specified using the commands

glTranslate{f,d} (x, y, z)

glRotate{f,d} (angle, x, y, z)

glScale{f,d} (x, y, z)

31Anshuman Razdan based on Peter Wonka's Slides

Thinking about Transformations

Translation then rotation Rotation then translation

transformations should be specified in the reverse order.

32Anshuman Razdan based on Peter Wonka's Slides

Projection Transformations

Perspective projectionViewing volume is a truncated pyramid.

Farther objects appear small and closer objects appear big.

glFrustum (left, right, bottom, top, near, far)

gluPerspective (fov, aspectratio, near, far)

These commands calculates the projection matrix and multiplies the current projection matrix by it.

glFrustum ( )

gluPerspective( )

33Anshuman Razdan based on Peter Wonka's Slides

Projection Transformations

Orthographic Projection

Viewing volume is a box.

Objects appear same size irrespective of their distance from the camera.

glOrtho (left, right, bottom, top, near, far)

gluOrtho2D (left, right, bottom, top)