2D Drawing &
OpenGL
• Outline
• World Space & Screen Space
Matrices
• Intro to OpenGL & GLUT
• 2D Texture Mapping
Screen Space
• Ultimately, we display our images and
graphics in screen space.
Pixels are addressed in screen-space
coordinates.
Screen Space
• However, screen space depends on:
the resolution of the display. I.e., the
number of pixels in x and y.
the size of the window that displays our
graphics.
• the zero point of the screen coordinate
system.
• the window aspect ratio.
Screen Coordinate Systems
GLUT
Windows API
X Windows under Unix / Linux
Apple QuickDraw
OpenGL
World Space
• Often, we want to structure our graphics
independent of screen or window sizes.
• We do so by defining world space where
we specify our graphics.
• World space provides the natural
coordinate system for the problem at
hand.
Normalized Device Coordinates
• Between world and screen space, we
introduce an intermediate “rendering
space” with normalized device
coordinates.
• NDC is similar to screen space, but
without any hardware display
dependencies.
• We pick the following convenient
coordinate system:
Why Introduce NDC?
• Simplifies many rendering operations and
makes them more amenable to a HW
implementation.
• Clipping
• Computing coefficients for interpolation
• Converting to fixed-point representation
• Separates the bulk of geometry
processing from the specifics of
rasterization.
World to NDC Mapping
• The transformation between world
coordinates and NDC is a simple scale
and offset.
• To compute the scale and offset, we
specify example
• input coordinate values and their desired
output values.
World to NDC Mapping
• For x coordinates:
World to NDC Mapping
• NDC coordinates are a scale and
displacement of world coordinates:
NDC to Screen Mapping
World to Screen Mapping
• The NDC to screen mapping could also be
implemented as a matrix transformation.
• Generally, it is not (dedicated hardware)
• World-to-NDC: floating point
• NDC-to-screen: fixed point
• Inserts an opportunity to compensate for
differences in coordinate frames:
Summary
Viewport
• We can also define a rectangular viewport
in pixel coordinates.
• All objects inside the NDC window are
mapped inside of the viewport.
Outline
World Space & Screen Space
Matrices
Intro to OpenGL & GLUT
2D Texture Mapping
Matrices
Matrix: An array of elements that follow certain
rules.
We use uppercase letters to indicate a matrix:
• A matrix that has n rows and m columns is said
to be of order n x m.
• We always mention the numbers of rows first.
Square Matrices
Row and Column Vectors
A 1 x n matrix is called a row vector.
A n x 1 matrix is called a column vector.
We will use lower case bold letters to indicate
vectors.
• In graphics (and in this class) we mostly use
column vectors.
Transpose of a Matrix
The transpose of A is written as AT.
AT is formed by interchanging rows and
columns of matrix A.
The transpose of a row vector is a column
vector.
Addition and Subtraction
• Addition and subtraction of matrices is
defined by addition and subtraction of their
corresponding elements.
• Note: We can only add / subtract matrices
of the same order.
Multiplication by a Scalar
• Scalar: an ordinary real (e.g., float)
number.
• To multiply a matrix by a scalar, we
• multiply each element of the matrix by the
number.
• Examples:
Matrix x Column Vector
.
Matrix x Column Vector
Linear Combinations
• A linear combination of m vectors is a
vector of the form:
• Where a1, a2, …, am are scalars.
• Example:
Examples
Compute the matrix-vector product:
Outline
• World Space & Screen Space
Matrices
• Intro to OpenGL & GLUT
• 2D Texture Mapping
Graphics APIs
API stands for Application Program Interface.
• It is a collection of routines that the programmer
can call, along with a model of how the routines
work together to produce graphics.
• As a programmer you see only the interface.
You are
• therefore shielded from the specifics of the
underlying
• graphics hardware or software.
Scene Graph vs. Low Level API
• Scene graph API:
• Implemented on top of a low level API.
• Specify rendering hints to the hardware.
• Controls the objects in the scene through a
scene graph.
• Low level API:
• Controls the 3D rendering directly.
• Very efficient implementation, close to
hardware.
Current Graphics APIs
• Scene graph APIs:
• Java3D
• VRML
• OpenInventor
• POVRay
• Low level APIs:
• OpenGL
• Direct3D (part of Microsoft’s DirectX)
OpenGL
• Window system independent.
• Operating system independent.
• Initially developed by Silicon Graphics Inc.
• OpenGL Architecture Review Board (ARB)
• Scales from PC to very high-end engines.
• Intuitive, procedural interface with C bindings.
• Version 1.4 commonly available on PCs.
• OpenGL 2.0 just introduced
OpenGL Extensions
• Many extensions for high-end features.
• Some extensions are ratified by the ARB:
• GL_ARB_multitexture();
• GL_ARB_multisample();
• Some are agreed on by multiple vendors:
• GL_EXT_abgr();
• Others are vendor specific:
• GL_ATI_vertex_array_object();
• GL_NV_register_combiners();
OpenGL and GLUT
Related APIs
• GLUT (OpenGL Utility Toolkit)
Portable windowing API
Not officially part of OpenGL
• OpenGL
• Initially developed by Silicon Graphics Inc
• OpenGL Architecture Review Board (ARB)
• AGL, GLX, WGL
• Glue between OpenGL and windowing systems
• GLU (OpenGL Utility Library)
• Part of OpenGL
• NURBS, tessellators, quadric shapes, etc
Preliminaries
• Header files (C:\Program Files\Microsoft
Visual Studio\Vc98\include\gl\)
#include <GL/glut.h> // must go first!
#include <GL/gl.h>
#include <GL/glu.h>
• Static libraries (C:\Program Files\Microsoft
Visual Studio\Vc98\lib\)
• Opengl32.lib / Glu32.lib / Glut32.lib /
• Dynamic link libraries (C:\windows\system\ for
Win98)
• Opengl32.dll / Glu32.dll / Glut32.
Preliminaries
• Add opengl32.lib glu32.lib glut32.lib to
your link options.
OpenGL Command Formats
Enumerated Types
• OpenGL defines numerous types for
compatibility:
OpenGL Geometric Primitives
• These are all the geometric primitives of
OpenGL:
A Simple Example
• Primitives are specified using
glBegin( primType );
glVertex2f(…); //One or more call
glEnd();
• primType determines how the vertices are
combined
Shapes Tutorial
OpenGL’s State Machine
• All rendering attributes are encapsulated in the OpenGL
state.
• Rendering styles.
• Shading and lighting.
• Texture mapping, etc.
• Setting State
glPointSize( size );
glLineStipple( repeat, pattern );
glShadeModel( GL_SMOOTH );
Enabling Features
glEnable( GL_LIGHTING );
glDisable( GL_TEXTURE_2D );
OpenGL State Variables
• You can query the State Machine to determine the state
of any variable.
• Any feature you enable or disable with glEnable /
• glDisable as well as numeric settings set with glSet
• can be queried with the many variations of glGet.
• Example: Setting the current drawing color.
GLubyte color[3];
glColor3ub( color[0],color[1],color[2] );
glColor3bv( color );
...
GLfloat colorf[3];
glGetFloatv( GL_CURRENT_COLOR,colorf );
GLUT Basics
• GLUT handles all interactions with the windows system
and user input devices (mouse, keyboard).
• Advantages:
Portable (Windows, Mac, Linux)
Minimal overhead (hides many details)
Appeal to C-hackers
• Disadvantages:
Ugly (outdated call-back-based event handling)
Limited interaction
Global variables galore
A Simple Program
GLUT Windows
• Create a top-level window with:
int id = glutCreateWindow(char *name);
Create sub-windows with:
glutCreateSubWindow(int id, x, y, w, h);
id: ID of the parent window.
x, y: Position relative to the parent window.
w, h: Width and height in pixels.
• Set the current window:
glutSetWindow( int id );
• Get the id of the current window:
int id = glutGetWindow(void);
Initialize
Executed before any other OpenGL calls.
• By default, GLUT sets up a viewport. We
only need to mess with it if the window
size changes.
Using Double Buffering
1) Request a double buffered color buffer.
glutInitDisplayMode( GLUT_RGB | GLUT_DOUBLE );
2) Clear color buffer.
glClear( GL_COLOR_BUFFER_BIT );
3) Render scene.
4) Request swap of front and back buffers.
glutSwapBuffers();
• Repeat steps 2-4 for animation
• glutSwapBuffers swaps the buffers of the
current
• window, if double buffered.
Immediate Mode
• Most OpenGL calls are immediately
executed.
Some notable exceptions are display lists.
• Finish all OpenGL drawing with a call to:
glFlush();
• glutSwapBuffers performs an implicit call to
• glFlush before it returns.
The Event Model
• Events from the input hardware are
queued into an event queue.
• Application routines (event handlers or
callbacks) handle specific event types.
GLUT Callback Functions
Register callbacks with GLUT:
• For subwindows, register the callbacks
right after the
• call to glutCreateSubwindow();
Keyboard Callback
Process keyboard input:
Mouse Callbacks
• GLUT lets you define several callback
functions for mouse events:
glutMouseFunc( mouseButton );
• Mouse button press or release events.
glutMotionFunc( mouseMove );
• Mouse movement while button is pressed
events.
Mouse Button Callback
• Design a callback function mouseButton as
follows:
void mouseButton( int button, int state, int x, int y );
int button: GLUT_LEFT_BUTTON,
GLUT_MIDDLE_BUTTON, GLUT_RIGHT_BUTTON
int state: GLUT_UP, GLUT_DOWN
int x, int y: mouse position
• Important: the mouse position y coordinate is
reversed
• from the OpenGL screen coordinate system!
Mouse Motion
• Design a callback function mouseMove as
follows:
void mouseMove( int x, int y );
• This event only occurs if the mouse is
moved while some button is held down.
Display
• Do all of your drawing here:
Viewport Mapping in OpenGL
• In OpenGL the world-to-viewport mapping
happens automatically every time a vertex
is drawn.
• OpenGL also automatically clips parts of
the object that lie outside the viewport
window.
• In 2D, the world window is set by
gluOrtho2D(), and the viewport is set by
glViewport().
OpenGL Functions
• GLUT code to establish a window on the
screen:
glutInitWindowSize(400, 400);
glutInitWindowPosition(100, 100);
• World-to-NDC mapping:
• gluOrtho2D(w.left,w.right,w.bottom,w.top);
• NDC-to-screen mapping:
glViewport(0,0,(GLsizei)w,(GLsizei)h);
OpenGL Code
• We usually set up the world-to-screen
mapping in an initialize() routine that is
called during startup:
Displaying Images
• When we display images, we typically
want that our world coordinates match our
screen coordinates:
Writing Pixels
To write an image of size (w x h) to the
display:
glDrawPixels( w, h, GL_RGB, GL_UNSIGNED_BYTE,*array);
The image is written at the current raster
position.
• To change the raster position:
glRasterPos2i(x, y);
• The default is (0,0)
Reading Pixels
• To read pixels (w x h) from the display
starting at (x,y):
• glReadPixels( x, y, w, h, GL_RGB,
GL_UNSIGNED_BYTE, *array);
• When reading pixels make sure you know
the number of bits of resolution in the
display.
• Check using glGetIntegerv(GL_RED_BITS, &nbits);
Resize Callback
• A reasonable choice we recommend is:
Animation
• We can simply change the variables to the
OpenGL calls over time.
• For example, we can change the rectangle
position by incrementing it every time step.
• When and where do we change the
variables?
• When do we call glutSwapBuffers() ?
Animation 1
• We can update the variables in the idle
callback:
Animation 2
• We can call the GLUT timer CB at
specified intervals:
