Outline

Raster Displays Image Format RGB Color Physics of Color and Color Perception
Advanced topics, will not be on exams

Brief introduction to openGL

Read 3.1, 3.2, 3.3, 3.4 (Optional Chapter 21)
1/2/2013 4:42:02 PM

cg-raster.ppt

Milestones of this Class

Milestones Due Date CAP4730 Due Date CAP5726

Programming Project 1 Programming Project 2

Midterm Exam Programming Project 3

February 22 March 29
March 6 April 26

February 15 March 15
March 6 April 5

Programming Project 4
Final Exam
1/2/2013 4:42:02 PM

Optional/April 26
May 3
cg-raster.ppt

April 26
May 3
2

Block Diagram of a Raster Display

Most computer graphics images are shown to the user on a raster display

1/2/2013 4:42:02 PM

cg-raster.ppt

Display Process

1/2/2013 4:42:02 PM

cg-raster.ppt

Video Monitor Displays - CRTs

x scan controller y x red green pixel value frame buffer (6 planes) blue DAC's electron beam guns deflection coils spot y

1/2/2013 4:42:02 PM

cg-raster.ppt

Video Monitor Displays Flat Panels

Transmissive: LCD: Liquid crystal display 1/2/2013 4:42:01 PM Emissive: Light Emitting Diode (LED) cg-raster.ppt

Input Devices
Images can also be generated by input devices
Commonly used ones are cameras and scanners Cameras typically use a Bayer mosaic array
Some use three separate arrays (3CCD cameras)

Scanners use a moving 1-D array of sensors We will not go into details of cameras and scanners beyond what we need for this class.

An Abstract Model of Displays and Input Devices We assume that the pixels are laid out in a rectangular array
It is also called a raster Adopted convention in the textbook
For a display with nx columns and ny rows of pixels, the bottom-left element pixel is (0, 0) and the top-right pixel is (nx-1, ny-1) A pixel is indexed by (x, y), indicating the column and row of the pixel

1/2/2013 4:42:01 PM

cg-raster.ppt

Example

1/2/2013 4:42:01 PM

cg-raster.ppt

Digital Images
Mathematically, an image can be represented by a 2-D matrix
Each entry (i, j) represents the pixel value at the corresponding location The value of a pixel can have different types, depending on the image types
Binary Unsigned char Int Float A vector (Color image, for example)
cg-raster.ppt 10

1/2/2013 4:42:01 PM

Image as a File
Image formats
TIFF GIF JPEG PBM/PPM PNG

1/2/2013 4:42:01 PM

cg-raster.ppt

11

Image as a File cont.

Image file consists of two parts
Header
Type of the image Size of the image Color map (optional)

Data
Uncompressed Compressed

1/2/2013 4:42:01 PM

cg-raster.ppt

12

Portable Pixel Map

ASCII PPM format
P3 Width Height Max Then pixel values in ASCII P6 Width Height Max Then pixel values in binary
cg-raster.ppt 13

Binary PPM format

1/2/2013 4:42:00 PM

Image Sequences
There are many different kinds of formats for movie or video sequences
avi mpeg

An easy way to generate a video sequence is to concatenate images together

Animated gif is such a format Can be done easily using convert
1/2/2013 4:42:00 PM

cg-raster.ppt

17

Visualization of Images
ImageMagick package (installed on linprog)
convert display animate available at http://www.simplesystems.org/ImageMagick/

1/2/2013 4:41:59 PM

cg-raster.ppt

18

RGB Color
In computer graphics colors are commonly represented by redgreen-blue triplet
Called the RGB color space
The range is from zero to one
Zero is fully off One is fully on

In images, the values are often quantized

For example, the most common size is one byte for each component with 24 bits in total
1/2/2013 4:41:59 PM

cg-raster.ppt

19

RGB Color Representations

True Color

Index Color

1/2/2013 4:41:59 PM

cg-raster.ppt

20

Gamma Correction of Display Devices

Display devices are non-linear with respect to input
displayed intensity (maximum intensity) a

1/2/2013 4:41:59 PM

cg-raster.ppt

21

The Alpha Channel

In computer graphics, we often need to partially overwrite the contents of a pixel
For example, we may want to composite the foreground and background This is done using the alpha channel, which specifies the transparency of the pixel

c c f (1 ) cb

1/2/2013 4:41:59 PM

cg-raster.ppt

22

Color Compositing Example

1/2/2013 4:41:59 PM

cg-raster.ppt

23

Color Compositing Example

1/2/2013 4:41:58 PM

cg-raster.ppt

24

Physics of Graphics
Source emits photons And then some reach the eye/camera.

Photons travel in a straight line

When they hit an object, they:

bounce off in a new direction or are absorbed
1/2/2013 4:41:58 PM

cg-raster.ppt

25

Physics of Color
Light is electromagnetic radiation
Different colors correspond to radiation of different wavelengths Intensity of each wavelength specified by amplitude We perceive electromagnetic radiation within the 380-800 nm range, the tiny piece of spectrum between infra-red and ultraviolet

1/2/2013 4:41:58 PM

cg-raster.ppt

26

Color and Wavelength

Most light we see is not just a single wavelength, but a combination of many wavelengths like below This profile is often referred to as a spectrum, or spectral power distribution.

1/2/2013 4:41:58 PM

cg-raster.ppt

27

The Eye

1/2/2013 4:41:58 PM

cg-raster.ppt

28

Color is Human Sensation

Cone and rod receptors in the retina Rod receptor is mostly for luminance perception Three different types of cone receptors in the fovea of retina, responsible for color representation
Each type is sensitive to different wavelengths

1/2/2013 4:41:58 PM

cg-raster.ppt

29

Cone Receptors
There are three types of cones, referred to as S, M, and L
They are roughly corresponding to blue, green, and red sensors, respectively Their peak sensitivities are located at approximately 430nm, 560nm, and 610nm for the "average" observer

1/2/2013 4:41:57 PM

cg-raster.ppt

30

Tristimulus Color Theory

The human response to a spectral radiance (light) is given by
S s( ) A( )d M m( ) A( )d L l ( ) A( )d

(see Fig. 21.2)

1/2/2013 4:41:57 PM

cg-raster.ppt

31

CIE Standard
CIE
International Commission on Illumination Human perception based standard (1931), established using color matching experiment
1/2/2013 4:41:57 PM

cg-raster.ppt

32

CIE Standard
CIE tristimulus values
X 683 x ( ) A( )d Y 683 y ( ) A( )d
380 380 800 800

Z 683 z ( ) A( )d
380

800

(see Fig. 21.5)

1/2/2013 4:41:57 PM

cg-raster.ppt

33

CIE xyY Space

Chromaticity diagram (the same color of the varying intensity, Y, should all end up at the same point)
X x X Y Z Y y X Y Z

1/2/2013 4:41:57 PM

cg-raster.ppt

34

Color Gamut
The range of color representation of display devices

1/2/2013 4:41:57 PM

cg-raster.ppt

35

RGB (Monitors)
The de facto standard

1/2/2013 4:41:56 PM

cg-raster.ppt

36

CMY(K): Printing
Cyan, Magenta, Yellow (Black) CMY(K) A subtractive color model
dye color absorbs reflects

cyan
magenta yellow black

red
green blue all

blue and green

blue and red red and green none

1/2/2013 4:41:56 PM

cg-raster.ppt

37

HSV
This color model is based on polar coordinates, not Cartesian coordinates

1/2/2013 4:41:56 PM

cg-raster.ppt

38

Examples (RGB, HSV, Luv)

1/2/2013 4:41:56 PM

cg-raster.ppt

39

OpenGL Pipeline

1/2/2013 4:41:56 PM

cg-raster.ppt

40

OpenGL Architecture

1/2/2013 4:41:56 PM

cg-raster.ppt

41

OpenGL as a Renderer
Geometric primitives
Points, lines and polygons Image Primitives Images and bitmaps

Separate pipeline for images and geometry

Linked through texture mapping

Rendering depends on state

Colors, materials, light sources, etc.

1/2/2013 4:41:55 PM

cg-raster.ppt

42

Relate APIs
AGL, GLX, WGL
Glue between OpenGL and windowing systems

GLU (OpenGL Utility Library)

Part of OpenGL NURBS, tessellators, quadric shapes, etc

GLUT (OpenGL Utility Toolkit)

Portable windowing API Not officially part of OpenGL

1/2/2013 4:41:55 PM

cg-raster.ppt

43

OpenGL and Related APIs

1/2/2013 4:41:55 PM

cg-raster.ppt

44

Preliminaries
Header Files #include <GL gl.h> #include <GL glu.h> #include <GL glut.h> Libraries Enumerated types OpenGL defines numerous types for compatibility
GLfloat, GLint, GLenum, etc.

1/2/2013 4:41:55 PM

cg-raster.ppt

45

Makefile

1/2/2013 4:41:55 PM

cg-raster.ppt

46

GLUT Basics
Application Structure Configure and open window Initialize OpenGL state Register input callback functions
render resize input: keyboard, mouse, etc.

Enter event processing loop

1/2/2013 4:41:55 PM

cg-raster.ppt

47

GLUT Framework

1/2/2013 4:41:54 PM

cg-raster.ppt

48

Sample Program

1/2/2013 4:41:54 PM

cg-raster.ppt

49

OpenGL Initialization
Set up whatever state youre going to use

1/2/2013 4:41:54 PM

cg-raster.ppt

50

GLUT Callback Functions

Routine to call when something happens
window resize or redraw user input animation

Register callbacks with GLU glutDisplayFunc(display); glutMouseFunc(mouse); glutKeyboardFunc(ssd_keyboard); glutReshapeFunc(reshape); void glutIdleFunc ( void(*)(void) callback ) void glutTimerFunc ( unsigned int msec, void(*)(int data) callback, int data)
1/2/2013 4:41:54 PM

cg-raster.ppt

51

Rendering Callback
Do all of our drawing here glutDisplayFunc(display);
void display(void) { Render_SSD(&thescene, &vcamera); }

1/2/2013 4:41:54 PM

cg-raster.ppt

52

Idle Callbacks
Use for animation and continuous update
glutIdleFunc( idle ); void idle( void ) {
t += dt; glutPostRedisplay();

1/2/2013 4:41:54 PM

cg-raster.ppt

53

User Input Callbacks

Process user input glutKeyboardFunc( ssd_keyboard );

1/2/2013 4:41:53 PM

cg-raster.ppt

54

Elementary Rendering
Geometric Primitives Managing OpenGL State OpenGL Buffers

1/2/2013 4:41:53 PM

cg-raster.ppt

55

OpenGL Geometric Primitives

All geometric primitives are specified by vertices

1/2/2013 4:41:53 PM

cg-raster.ppt

56

Simple Example
void drawRhombus( GLfloat color[] ) {
glBegin( GL_QUADS );
glColor3fv( color ); glVertex2f( 0.0, 0.0 ); glVertex2f( 1.0, 0.0 ); glVertex2f( 1.5, 1.118 ); glVertex2f( 0.5, 1.118 );

glEnd();

1/2/2013 4:41:53 PM

cg-raster.ppt

57

OpenGL Command Formats

1/2/2013 4:41:53 PM

cg-raster.ppt

58

Specifying Geometric Primitives

Primitives are specified using
glBegin( primType ); glEnd();

primType determines how vertices are combined

GLfloat red, greed, blue; Glfloat coords[3]; glBegin( primType );
for (i =0;i <nVerts; ++i ) { glColor3f( red, green, blue ); glVertex3fv( coords ); }

glEnd();

1/2/2013 4:41:53 PM

cg-raster.ppt

59

OpenGL Color Model

Both RGBA (true color) and Color Index

1/2/2013 4:41:52 PM

cg-raster.ppt

60

Controlling Rendering
Appearance
From wireframe to texture mapped

1/2/2013 4:41:52 PM

cg-raster.ppt

61

OpenGLs State Machine

All rendering attributes are encapsulated in the OpenGL State
Rendering styles Shading Lighting Texture mapping

1/2/2013 4:41:52 PM

cg-raster.ppt

62

Manipulating OpenGL State

Appearance is controlled by current state
for each ( primitive to render ) {
update OpenGL state render primitive

Manipulating vertex attributes is most common way to manipulate state

glColor*() / glIndex*() glNormal*() glTexCoord*()

1/2/2013 4:41:52 PM

cg-raster.ppt

63

Controlling Current State

Setting State
glPointSize( size ); glLineStipple( repeat, pattern ); glShadeModel( GL_ SMOOTH );

Enabling Features
glEnable( GL_ LIGHTING ); glDisable( GL_TEXTURE_2D );

1/2/2013 4:41:52 PM

cg-raster.ppt

64

Transformations in OpenGL
Modeling Viewing
orient camera projection

Animation Map to screen

1/2/2013 4:41:52 PM

cg-raster.ppt

65

Coordinate Systems and Transformations

Steps in Forming an Image
Specify geometry (world coordinates) Specify camera (camera coordinates) Project (window coordinates) Map to viewport (screen coordinates)

Each step uses transformations Every transformation is equivalent to a change in coordinate systems

1/2/2013 4:41:52 PM

cg-raster.ppt

66

Transformation Pipeline

1/2/2013 4:41:51 PM

cg-raster.ppt

67

glOrtho
For example, glOrtho specifies a transformation matrix

1/2/2013 4:41:51 PM

cg-raster.ppt

68

Common Transformation Usage

Example of resize() routine
restate projection & viewing transformations

Usually called when window resized Register a callback for glutReshapeFunc()

1/2/2013 4:41:51 PM

cg-raster.ppt

69

Aspect Ratio

1/2/2013 4:41:51 PM

cg-raster.ppt

70

openGL Usage in This Class

We will use some basic openGL functions to avoid handling of windows
The openGL functions you can use will be specified in the programming assignments

1/2/2013 4:41:47 PM

cg-raster.ppt

71

Summary
Abstractly, we can treat a monitor (a display device) as an image as they are equivalent to us Color and its perception involve complex processes
Physics of light Color perception and manipulation

In this class, we will use some basic openGL functions

8/24/2010 7:29:29 PM

cg-raster.ppt

72