CSE 494/598

33
CSE 494/598 Intro to Applied Computer Graphics Anshuman Razdan DCST [email protected] AR's Web Page http://dcst2.east.asu.edu/~razd an

description

CSE 494/598. Intro to Applied Computer Graphics Anshuman Razdan DCST [email protected] AR's Web Page http://dcst2.east.asu.edu/~razdan. Disclaimer. These slides can only be used as study material for the at ASU The slides cannot be distributed or used for another purpose - PowerPoint PPT Presentation

Transcript of CSE 494/598

Page 1: CSE 494/598

CSE 494/598

Intro to Applied Computer Graphics

Anshuman RazdanDCST

[email protected]'s Web Page

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

Page 2: CSE 494/598

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

Page 3: CSE 494/598

OpenGL Part 1

Introduction to OpenGL and GLUT: Part I

Page 4: CSE 494/598

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

Page 5: CSE 494/598

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

Page 6: CSE 494/598

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

Page 7: CSE 494/598

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

Page 8: CSE 494/598

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.

Page 9: CSE 494/598

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, …

Page 10: CSE 494/598

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

Page 11: CSE 494/598

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 )

Page 12: CSE 494/598

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

Page 13: CSE 494/598

13Anshuman Razdan based on Peter Wonka's Slides

Simple Example

Page 14: CSE 494/598

GLUT: OpenGL Utility Toolkit

Page 15: CSE 494/598

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

Page 16: CSE 494/598

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

Page 17: CSE 494/598

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

Page 18: CSE 494/598

18Anshuman Razdan based on Peter Wonka's Slides

Example I

500

500

(0.5,0.5)

(-0.5,-0.5)

Page 19: CSE 494/598

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

Page 20: CSE 494/598

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

Page 21: CSE 494/598

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

Page 22: CSE 494/598

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

Page 23: CSE 494/598

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

Page 24: CSE 494/598

Projection and Viewport

Page 25: CSE 494/598

25Anshuman Razdan based on Peter Wonka's Slides

Projection and Clipping Window

Page 26: CSE 494/598

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)

Page 27: CSE 494/598

27Anshuman Razdan based on Peter Wonka's Slides

Stages of Vertex Transformation

Page 28: CSE 494/598

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

Page 29: CSE 494/598

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 ) )

Page 30: CSE 494/598

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)

Page 31: CSE 494/598

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.

Page 32: CSE 494/598

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

Page 33: CSE 494/598

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)