Geometric Modellin

INTRODUCTION
TO
COMPUTER
GRAPHIC S
Geometric Modeling; The Graphics Framework; Introduction to OpenGL
credits: van Dam,R. Hwa
September 6-8, 2011
OpenGL 1/54
INTRODUCTION
TO
COMPUTER
GRAPHIC S
Recap
CG markets: entertainment and science
same tools (hw & sw), different apps come talk to me about a Directed Study
CG paradigms:
sample-based graphics (pixels, image processing) geometry-based graphics
Geometric modeling
primitives decomposition of a model
September 6-8, 2011
OpenGL 2/54
INTRODUCTION
TO
COMPUTER
GRAPHIC S
Decomposition of a Geometric Model

Divide and Conquer Hierarchy of geometrical components Reduction to primitives (e.g., spheres, cubes, etc.) Simple vs. not-so-simple elements (nail vs. screw)
Head Shaft Point

composition decomposition
September 6-8, 2011
OpenGL 3/54
INTRODUCTION
TO
COMPUTER
GRAPHIC S
Hierarchical (Tree) Diagram of Nail

Object to be modeled is (visually) analyzed, and then decomposed into collections of primitive shapes. Tree diagram provides visual method of expressing composed of relationships of model
Nail Head Body (cylinder) Shaft Point (cylinder) (cone) tree diagram

root node
leaf nodes
Such diagrams are part of 3D program interfaces (e.g., 3D Studio MAX, Maya) As data structure to be rendered, it is called a scenegraph
September 6-8, 2011
OpenGL 4/54
INTRODUCTION
TO
COMPUTER
GRAPHIC S
Composition of a Geometric Model

Translate Translate and Scale
Translate and Rotate Primitives in their own modeling coordinate system Composition in world (root) coordinate system
Primitives created in decomposition process must be assembled to create final object. Done with affine transformations, T, R, S (as in above example). Other composition operators exist (e.g., Constructive Solid Geometry CSG -- uses Boolean operators).
credits: van Dam,R. Hwa September 6-8, 2011 OpenGL 5/54
INTRODUCTION
TO
COMPUTER
GRAPHIC S
2D Primitives
Line Polyline
Polygon Y Y
Circle
September 6-8, 2011
OpenGL 6/54
INTRODUCTION
TO
COMPUTER
GRAPHIC S
Curves
Piecewise linear approximation
Splines: higher-order polynomials

piecewise curvilinear approximation
French Curves Draftmans Spline
Mathematical Splines
(duck)
Natural Cubic Spline:
September 6-8, 2011
OpenGL 7/54
INTRODUCTION
TO
COMPUTER
GRAPHIC S
Example 3D Primitives
Polyline Polyhedron
Sphere
Patch
(spline boundary curve)
September 6-8, 2011
OpenGL 8/54
INTRODUCTION
TO
COMPUTER
GRAPHIC S
What Kind of Math do We Need?

Cartesian Coordinates Typically modeling space is floating point, screen space is integer
x, y Cartesian grid
Integer Grid
NB:Often, screen coordinates are measured top to bottom, based on raster scan
(0,0)
September 6-8, 2011
OpenGL 9/54
INTRODUCTION
TO
COMPUTER
GRAPHIC S
Conceptual Framework for Interactive Graphics

Graphics library/package (e.g., OpenGL) is intermediary between application and display hardware (Graphics System) Application program maps application objects to views (images) of those objects by calling on graphics library This hardware and software framework is more than 4 decades old but is still useful, indeed dominant
application model (objects)
Application program
Graphics Library (GL)
Graphics System
September 6-8, 2011
OpenGL 10/54
INTRODUCTION
TO
COMPUTER
GRAPHIC S
2D Hw/Sw Topics
a) Display Hardware: Raster scan vs. Vector b) Color Tables
indirect specification of (pseudo) color color correction, simple types of animation
c) BitBlt/RasterOp for operating on blocks of pixels
September 6-8, 2011
OpenGL 11/54
INTRODUCTION
TO
COMPUTER
GRAPHIC S
a) Graphics Display Hardware

Vector (calligraphic, stroke, random-scan)
still used in some plotters
Ideal Drawing
Vector Drawing
Raster (TV, bitmap, pixmap), used in displays and laser printers
Raster
Outline primitives credits: van Dam,R. Hwa
Filled primitives September 6-8, 2011 OpenGL 12/54
INTRODUCTION
TO
COMPUTER
GRAPHIC S
2D Raster Architecture
Frame buffer
Display
Raster displays store images (pixmaps, or bitmaps) in a frame buffer, also known as bitmap buffer, or refresh buffer The frame buffer is a chunk of memory located either in separate hardware (VRAM) or in CPUs main memory (DRAM) The frame buffer can be accessed directly, through memory operations Video controller draws all scan-lines at consistent > 60 Hz;
separates update rate of the frame buffer and refresh rate of the display contains Color-Table
September 6-8, 2011
OpenGL 13/54
INTRODUCTION
TO
COMPUTER
GRAPHIC S
b) Color Tables: 1-bit vs. n-bit Display
2n intensities or colors
September 6-8, 2011
OpenGL 14/54
INTRODUCTION
TO
COMPUTER
GRAPHIC S
Image Display System Look-up Table
Any specific 2n colors may be inadequate (n may be as low as 16 in low-end systems) Look-up table allows 2n colors out of 224 colors to be used in one image, some other 2n in another image
224 = approx. 16.7 million, exceeds eyes ability to discriminate (somewhere between 7-10 million)
Color table is resource managed (usually) by window manager
September 6-8, 2011
OpenGL 15/54
INTRODUCTION
TO
COMPUTER
GRAPHIC S
Color LookUp Table Operation
Pixel value is indexed to color look up table (CLUT) where color is stored. Here we use only 12 bits (4bits per color) for clarity typically, 24 bits are used CLUT look-up done at video rates In 24-bit true color systems, 3 x 8 bits for R, G, B; each color has its own 8-bit CLUT (0-255) CLUT allows variety of effects
fast image changes: change table rather than stored image multiple images: select or composite/blend animation hack
September 6-8, 2011
OpenGL 16/54
INTRODUCTION
TO
COMPUTER
GRAPHIC S
c) BitBlt/RasterOp
(1/3)
Logically operate on each pixel in rectangular source and destination regions in same or different pixmaps to achieve dynamics, e.g., to move/scroll windows on screen RasterOp (Source, Destination) Destination In some implementations S and D need not be same size
pixmap stored in frame buffer
September 6-8, 2011
OpenGL 17/54
INTRODUCTION
TO
COMPUTER
GRAPHIC S
BitBlt/RasterOp

(2/3)
AND (S,D): S can mask out pixels in D OR (S,D): S is non-destructively added to D; used for painting, transparent and kerned characters (where characters extend beyond their boxes)
Heres how you can use them:

Lets say you want to add some game sprites to background 1. Mask out with black
AND
0 (black) AND anything is 0, 1 (white) AND anything is anything 2. Add sprites in
OR
0 OR anything is anything credits: van Dam,R. Hwa September 6-8, 2011 OpenGL 18/54
INTRODUCTION
TO
COMPUTER
GRAPHIC S
More BitBlt/RasterOp

(3/3)
Replace (S,D): S destructively replaces D, i.e., is deleted and copied on top of D (also called Move); used for making opaque characters, icons, scroll Copy (S,D) as above, but S is not deleted XOR (S,D) S selectively inverts D; used in 1-bit systems for cheap cursors:
S XOR (S XOR D) = D 0 = W, 1 = B XOR S XOR S
Note: effects in color systems for all but replace may be weird
September 6-8, 2011
OpenGL 19/54
INTRODUCTION
TO
COMPUTER
GRAPHIC S
Recap
Geometry-based paradigm (model decomposition, scenegraphs) The Graphics Framework 2D hw/sw select topics
display hw: vector vs. raster; the framebuffer, the video controller, the display color-tables BitBlt operation
Application program
Graphics System
September 6-8, 2011
OpenGL 20/54
INTRODUCTION
TO
COMPUTER
GRAPHIC S
Next: the Graphics Library
Application model
Application program
Graphics System
September 6-8, 2011
OpenGL 21/54
INTRODUCTION
TO
COMPUTER
GRAPHIC S
Graphics Library
examples: OpenGL, DirectX, X3D provides representations and support for:
primitives attributes color line style material properties for 3D lights transformations
immediate mode vs. retained mode

immediate mode: no stored representation, package holds only attribute state, and application must completely draw each frame; simple to use but slow; requires at least one function call for every vertex to be drawn. retained mode: library compiles and displays from scenegraph; give the library a pointer to a bunch of Vertex data and tell it to render from there
September 6-8, 2011
OpenGL 22/54
INTRODUCTION
TO
COMPUTER
GRAPHICS
What is OpenGL?
The Open Graphics Library
3-D graphics API specification a software interface to graphics hardware1 raster graphics library pass in vertices, normals, and other scene data get pixels out industry standard supported across many platforms Mac OS, Windows, Linux, iPhone, PSP specification publicly available
The OpenGL Graphics System: A Specication Version 3.0
credits: van Dam, R. Hwa
September 6, 2011
OpenGL 23/54
INTRODUCTION
TO
COMPUTER
GRAPHICS
OpenGL Architecture (1/2)

OpenGL uses a client-server model
client sends commands to the server server interprets, processes commands note: client and server usually on the same computer, but need not be
your program = client OpenGL = server
example interaction:
program
begin triangle normal (0, 0, -1) vertex (-1, 1, -1, 1) vertex (1, -1, -1, 1) vertex (-1, -1, -1, 1) end triangle <scan-converts the given triangle with normal (0,0,-1) at all vertices>
OpenGL
September 6, 2011
OpenGL 24/54
INTRODUCTION
TO
COMPUTER
GRAPHICS
OpenGL Architecture (2/2)

OpenGL is state-full and procedural
the current OpenGL state (collectively called a context) contains data describing how rendering should proceed
ex: current color, lights, textures, etc
state does not change until explicitly set

once some state is set, it remains in effect until changed considering we are working with hardware, this makes some sense want to have precise control
procedural model
usually accessed through a plain C API NOT object-oriented at all (though this changes gradually in OpenGL 3.1 and beyond)
can be cumbersome if you are used to working with object-oriented systems

one line can affect how all subsequent code executes sometimes difficult to encapsulate functionality have to be mindful of default state as well
September 6, 2011
OpenGL 25/54
INTRODUCTION
TO
COMPUTER
GRAPHICS
OpenGL vs. Direct3D

Direct3D is Microsofts low-level 3D graphics API and plays a similar role to OpenGL in the graphics pipeline. Though the APIs feel somewhat different, at the end of the day, they provide basically the same functionality. Differences OpenGL is a specification with several free implementations on different platforms, while Direct3D is a proprietary API written by Microsoft. Direct3D exposes the programmer to the graphics hardware much more than OpenGL does. While OpenGL certainly supports hardware acceleration, it generally tries to abstract away details of dealing with the hardware. Direct3D on the other hand, allows much more fine-grained control but sacrifices some ease of use to do so. For Windows users, D3Ds tight coupling with windows has its advantages
Development environment is standardized and robust. D3D development is tightly integrated with Visual Studio and other powerful tools
Direct3D provides a much more object-oriented API than GL. Still, many would argue Direct3D is clunkier and harder to use than OpenGL. Overall, OpenGL is more widely used than Direct3D due to its simplicity and availability on a wider range of platforms. (both used in the games industry, however OpenGL used also w/out fail in scivis.)
September 6, 2011
OpenGL 26/54
INTRODUCTION
TO
COMPUTER
GRAPHIC S
OpenGL, GLU, and GLUT

OpenGL (Graphics Library)
offers a platform-independent software interface with graphics hardware supports basic geometric primitives (points, lines, polygons) sets up an environment for graphical programming May be useful to think of it as a state machine
GLU (OpenGL Utility Library)

higher-level features (e.g. curved surfaces) built out of basic OpenGL functions
GLUT (OpenGL Utility Toolkit)

separate library by Mark Kilgard, platform independent hides details about basic window operations and context creation a simple framework for writing OpenGL applications independent of any particular platform
INTRODUCTION
TO
COMPUTER
GRAPHIC S
Anatomy of an OpenGL program

#include <GL/glut.h> #include <stdio.h> int main(int argc, char **argv) { glutInit( &argc, argv ); glutInitDisplayMode(GLUT_DOUBLE|GLUT_RGB); glutInitWindowSize(400, 300); glutInitWindowPosition(0,0); glutCreateWindow("GLUT Skeleton"); //initialize callbacks here // my_setup(); glutMainLoop(); return(0); }
September 6-8, 2011
OpenGL 28/54
INTRODUCTION
TO
COMPUTER
GRAPHIC S
Single vs. Double Buffering
Use two buffers (two chunks of memory) Draw always on the back buffer When done drawing, swap buffers
INTRODUCTION
TO
COMPUTER
GRAPHIC S
glutInitDisplayMode()
#include <GL/glut.h> #include <stdio.h> int main(int argc, char **argv) { glutInit( &argc, argv ); glutInitDisplayMode(GLUT_DOUBLE|GLUT_RGB); glutInitWindowSize(400, 300); glutInitWindowPosition(0,0); glutCreateWindow("GLUT Skeleton"); //initialize callbacks here // my_setup(); glutMainLoop(); return(0); } GLUT_DOUBLE, GLUT_SINGLE GLUT_RGB, GLUT_RGBA, GLUT_INDEX GLUT_DEPTH
INTRODUCTION
TO
COMPUTER
GRAPHIC S
glutInitWindow*()
September 6-8, 2011
OpenGL 31/54
INTRODUCTION
TO
COMPUTER
GRAPHIC S
glutCreateWindow()
#include <GL/glut.h> #include <stdio.h> int main(int argc, char **argv) { glutInit( &argc, argv ); glutInitDisplayMode(GLUT_DOUBLE|GLUT_RGB); glutInitWindowSize(400, 300); glutInitWindowPosition(0,0); glutCreateWindow("GLUT Skeleton"); //initialize callbacks here // my_setup(); glutMainLoop(); return(0); } glutCreateWindow merely requests a window
September 6-8, 2011
OpenGL 32/54
INTRODUCTION
TO
COMPUTER
GRAPHIC S
Anatomy of an OpenGL program

September 6-8, 2011
OpenGL 33/54
INTRODUCTION
TO
COMPUTER
GRAPHIC S
glutMainLoop()
Event-Driven Programming
Interactive graphics program are typically event-driven
Main program goes into a loop, waiting for things to happen

e.g., keyboard, mouse inputs, etc. when an interesting event occurs, callback function returns control to program
The events can be

user-input generated (mouse, keyboard etc) system-generated (window creation, overlapping-window removed etc)
September 6-8, 2011
OpenGL 34/54
INTRODUCTION
TO
COMPUTER
GRAPHIC S
Callbacks
OpenGL handles events through the mechanism of callbacks: associate events with procedures procedure gets called-back whenever its associated event takes place Every OpenGL program must handle the display event
September 6-8, 2011
OpenGL 35/54
INTRODUCTION
TO
COMPUTER
GRAPHIC S
Common Callbacks
Input events: glutMouseFunc glutKeyboardFunc System events: glutDisplayFunc (!!!) glutReshapeFunc glutTimerFunc glutIdleFunc Example: setting up callbacks glutDisplayFunc( my_display ); glutIdleFunc( my_idle );
September 6-8, 2011
OpenGL 36/54
INTRODUCTION
TO
COMPUTER
GRAPHIC S
Example my_display()
void my_display(void) { //insert your drawing code always here glClear(GL_COLOR_BUFFER_BIT) ; glColor3f(0,0,1) ; glBegin(GL_POLYGON); glVertex2f(-0.25, 0.75); glVertex2f(0.95, 0.75); glVertex2f(0.95, -0.55); glVertex2f(-0.25, -0.55); glEnd(); glutSwapBuffers(); } return ;
September 6-8, 2011
OpenGL 37/54
INTRODUCTION
TO
COMPUTER
GRAPHIC S
The Callback for Displaying

my_display gets called: at initial creation of the window when window becomes unobstructed when the program requests it glutPostRedisplay()
September 6-8, 2011
OpenGL 38/54
INTRODUCTION
TO
COMPUTER
GRAPHIC S
A Simple Display Function

void my_display(void) { glClear(GL_COLOR_BUFFER_BIT) ; glColor3f(0,0,1) ; glBegin(GL_POLYGON); glVertex2f(-0.1, 0.7); glVertex2f(0.9, 0.7); glVertex2f(0.9, -0.3); glVertex2f(-0.1, -0.3); glEnd(); glutSwapBuffers(); return ;
September 6-8, 2011
OpenGL 39/54
INTRODUCTION
TO
COMPUTER
GRAPHIC S
What Goes Between glBegin and glEnd

Specification of mode GL_POINTS GL_LINES, GL_LINE_STRIP, GL_LINE_LOOP GL_POLYGON GL_TRIANGLES, GL_TRIANGLE_STRIP, GL_TRIANGLE_FAN GL_QUADS, GL_QUADS_STRIP Declaration of vertices glVertex{2|3|4}{i|f|d}[v] integer, float, or double Attributes Color Point size Line width, style Patterns for filled polygons
INTRODUCTION
TO
COMPUTER
GRAPHIC S
How does the output change with respect to different modes?

void my_display(void) { glClear(GL_COLOR_BUFFER_BIT) ; glColor3f(0,0,1) ; glBegin(??); glVertex2f( 0.0, 0.9); glVertex2f(-0.5,-0.9); glVertex2f( 0.9, 0.2); glVertex2f(-0.9, 0.2); glVertex2f( 0.5,-0.9); glEnd(); glutSwapBuffers(); return ;
September 6-8, 2011
OpenGL 41/54
INTRODUCTION
TO
COMPUTER
GRAPHIC S
Mouse Inputs
Associate mouse events with my_mouse procedure:
glutMouseFunc(my_mouse)
Write your own code inside my-mouse: void my_mouse(int button, int state, int x, int y) where button can take these values: GLUT_LEFT_BUTTON, GLUT_MIDDLE_BUTTON, GLUT_RIGHT_BUTTON state: GLUT_UP, GLUT_DOWN x, y:
position in window (in pixels) with origin at upper left
September 6-8, 2011 OpenGL 42/54
INTRODUCTION
TO
COMPUTER
GRAPHIC S
Drawing Space
void glut_setup(void) { glutInitWindowSize(400,100); glutInitWindowPosition(0,0); glutDisplayFunc(my_display); return ; } void my_display(void) { glBegin(GL_POLYGON); glVertex2f(-0.1, 0.7); glVertex2f(0.9, 0.7); glVertex2f(0.9, -0.3); glVertex2f(-0.1, -0.3); glEnd(); glutSwapBuffers(); return ;
What is the expected image output?

INTRODUCTION
TO
COMPUTER
GRAPHIC S
Viewport
Defines where in the window to display the image Uses within window coordinate system (pixel unit; origin at lower left corner) OpenGL default: set to be the entire window
default window reshape: set viewport to whole window
September 6-8, 2011
OpenGL 44/54
INTRODUCTION
TO
COMPUTER
GRAPHIC S
Adding-in a Viewport Function

Define callback: my_reshape(w,h) Otherwise, viewport will be set to whole window again In the function my_reshape call: glViewport(origin_x,origin_y, width,height); note that origin is at the lower left corner
September 6-8, 2011
OpenGL 45/54
INTRODUCTION
TO
COMPUTER
GRAPHIC S
Define User-Friendly Coordinate System

More intuitive instead of square in the interval of [-1,1] Graphics system does the mapping in OpenGL, this is done with the projection matrix glMatrixMode (GL_PROJECTION); glLoadIdentity(); gluOrtho2D(left,right,bottom,top);
September 6-8, 2011
OpenGL 46/54
INTRODUCTION
TO
COMPUTER
GRAPHIC S
Changes of Co-Ordinates
glBegin(GL_POLYGON); glVertex2i(1,2); glVertex2i(7,2); glVertex2i(4,10); glEnd();
gluOrtho2D(2,8,5,12);
glViewPort(0,0,500,300); glutInitWindowSize(800,500);
glutInitWindowPosition(0,0);
September 6-8, 2011
OpenGL 47/54
INTRODUCTION
TO
COMPUTER
GRAPHIC S
Bonus: Operating on the Frame Buffer

Steps:
1.Allocate space for pixel array 1 x width x height x sizeof(pixel) array of pixels (grayscale image) or 3 x width x height sizeof(pixel) array (RGB image) or 4 x width x height array sizeof(pixel) (RGBA image) etc 2.Initialize array with original image values 3.Perform desired operations on pixel array 4.Write array to Frame Buffer: glRasterPos( x, y ) specify x, y position where we want to write some pixels glDrawPixels( , *pixel_array) write a block of pixels to the frame buffer
September 6-8, 2011
OpenGL 48/54

Geometric Modellin

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Geometric Modellin

Uploaded by

Copyright:

Available Formats

INTRODUCTION

Geometric Modeling; The Graphics Framework; Introduction to OpenGL

credits: van Dam,R. Hwa

September 6-8, 2011

credits: van Dam,R. Hwa

September 6-8, 2011

Decomposition of a Geometric Model

Head Shaft Point

credits: van Dam,R. Hwa

September 6-8, 2011

Hierarchical (Tree) Diagram of Nail

credits: van Dam,R. Hwa

September 6-8, 2011

Composition of a Geometric Model

credits: van Dam,R. Hwa

September 6-8, 2011

Splines: higher-order polynomials

Natural Cubic Spline:

credits: van Dam,R. Hwa

September 6-8, 2011

(spline boundary curve)

credits: van Dam,R. Hwa

September 6-8, 2011

What Kind of Math do We Need?

credits: van Dam,R. Hwa

September 6-8, 2011

Conceptual Framework for Interactive Graphics

application model (objects)

Graphics Library (GL)

credits: van Dam,R. Hwa

September 6-8, 2011

c) BitBlt/RasterOp for operating on blocks of pixels

credits: van Dam,R. Hwa

September 6-8, 2011

a) Graphics Display Hardware

Raster (TV, bitmap, pixmap), used in displays and laser printers

Outline primitives credits: van Dam,R. Hwa

Filled primitives September 6-8, 2011 OpenGL 12/54

credits: van Dam,R. Hwa

September 6-8, 2011

b) Color Tables: 1-bit vs. n-bit Display

credits: van Dam,R. Hwa

September 6-8, 2011

Image Display System Look-up Table

Color table is resource managed (usually) by window manager

credits: van Dam,R. Hwa

September 6-8, 2011

Color LookUp Table Operation

credits: van Dam,R. Hwa

September 6-8, 2011

pixmap stored in frame buffer

credits: van Dam,R. Hwa

September 6-8, 2011

Heres how you can use them:

0 (black) AND anything is 0, 1 (white) AND anything is anything 2. Add sprites in

S XOR (S XOR D) = D 0 = W, 1 = B XOR S XOR S

credits: van Dam,R. Hwa

September 6-8, 2011

Graphics Library (GL)

credits: van Dam,R. Hwa

September 6-8, 2011

Next: the Graphics Library

Graphics Library (GL)