Images in General, Images in OpenGL

21
Images in General, Images in OpenGL Glenn G. Chappell [email protected] U. of Alaska Fairbanks CS 381 Lecture Notes Monday, November 24, 2003

description

Images in General, Images in OpenGL. Glenn G. Chappell [email protected] U. of Alaska Fairbanks CS 381 Lecture Notes Monday, November 24, 2003. Review: Image Basics [1/2]. A raster image (or image or pixel rectangle or pixmap ) is a 2-D array of color values. - PowerPoint PPT Presentation

Transcript of Images in General, Images in OpenGL

Page 1: Images in General, Images in OpenGL

Images in General,Images in OpenGL

Glenn G. [email protected]

U. of Alaska Fairbanks

CS 381 Lecture NotesMonday, November 24, 2003

Page 2: Images in General, Images in OpenGL

24 Nov 2003 CS 381 2

Review:Image Basics [1/2]

A raster image (or image or pixel rectangle or pixmap) is a 2-D array of color values.

OpenGL (along with other graphics libraries) provides the following types of primitives: Points. Polylines. Filled polygons. Raster images. Bitmaps.

Two Pipelines The geometry pipeline handles the first three. The image pipeline handles the last two.

Page 3: Images in General, Images in OpenGL

24 Nov 2003 CS 381 3

Top: geometry pipeline. Bottom: image pipeline. This is a huge over-simplification, as usual.

The image pipeline has the same data type at start & end. So it can run backwards.

Review:Image Basics [2/2]

FragmentsVertexVertex

PixmapPixmap

Fragment Fragment

Pixmap Pixmap

VertexOperations

RasterizationFragment

OperationsFrameBuffer

VertexData

PixelOperations

PixelData

Page 4: Images in General, Images in OpenGL

24 Nov 2003 CS 381 4

Images in General:Buffers In CG, a (2-D) buffer is a block of memory,

arranged as a 2-D array. Width and height correspond to the size of some image

(the viewport?). Often it is convenient to implement conceptually

different buffers as a single buffer in which each element is essentially a “packed” struct. OpenGL buffers are generally done this way. Each conceptual buffer occupies different bitplanes in

the buffer as a whole. See page 306 in the blue book for an illustration.

So an image in the frame buffer may be stored in a very different format from images accessible to the application.

Page 5: Images in General, Images in OpenGL

24 Nov 2003 CS 381 5

Images in General:Images in an Application Images managed by an application are stored in arrays:

const int img_width = 200; // Sometimes these needconst int img_height = 100; // to be powers of 2.color img[height][width]; // Height first! (Why?)

“color” above is usually an array of 3 or 4 GLubyte’s:

GLubyte img_rgb[img_height][img_width][3];GLubyte img_rgba[img_height][img_width][4];

Here, each GLubyte is a number from 0 to 255. So multiply colors in 0..1 format by 255 before storing them in the array.

Grayscale (“luminance”) images may require only one number for the color:

GLubyte img_lum[img_height][img_width];

Page 6: Images in General, Images in OpenGL

24 Nov 2003 CS 381 6

Images in General:Images in Files

Images stored in files are usually compressed in some way. Some of these compression techniques are

very complex, and therefore difficult to read. We will not have time to look much into image

file formats this semester. If you want to read an image file, go

ahead and use someone else’s code. Make sure it’s legal! And find the code before you spend a lot of

time writing a program that requires it.

Page 7: Images in General, Images in OpenGL

24 Nov 2003 CS 381 7

Images in General:BITBLT Copying and rendering raster images is

accomplished via an operation known as bit-block transfer or bitwise block transfer. Regardless the abbreviation is BITBLT. Usually pronounced “bit blit”. Sometimes “blit”. Also

“blitting”, etc. Something that does this is a “blitter”. BITBLT can be done very efficiently in hardware.

This fact figured prominently in the early days of mass-market GUI machines.

E.g., the Commodore Amiga had much faster graphics than the original Apple Macintosh, largely because it had a specialized BITBLT chip.

Read about BITBLT in section 7.3 of the blue book.

Page 8: Images in General, Images in OpenGL

24 Nov 2003 CS 381 8

Images in OpenGL:Introduction; Raster Position Now we look at raster-image handling in OpenGL.

Primary topic: the three image transfer commands glDrawPixels, glReadPixels, glCopyPixels.

OpenGL draws images in the frame buffer at the raster position. We saw this when we discussed GLUT bitmap fonts. Set the raster position with glRasterPos…. The raster position goes through the vertex-operations

portion of the geometry pipeline.• It is transformed by the model/view, projection, and viewport

transformations.• It is clipped; if outside the viewport, no image is drawn.

Images do not pass through the geometry pipeline.• So you cannot rotate them with glRotate…, and you cannot scale

them with glScale….• But you can move them with glTranslate…, right?• However, we can scale and flip images. More on this later.

Page 9: Images in General, Images in OpenGL

24 Nov 2003 CS 381 9

Images in OpenGL:Image Transfer Commands Function glDrawPixels.

Transfers a pixmap from an array to the frame buffer. Draws at the current raster position. Does not change the raster position.

Function glReadPixels. Transfers a pixmap from a specified position in the

frame buffer to an array. Do not use the raster position.

Function glCopyPixels. Transfers a pixmap from a specified position in the

frame buffer to the frame buffer. Draws at the current raster position. Does not change the raster position.

Page 10: Images in General, Images in OpenGL

24 Nov 2003 CS 381 10

Path through the pipeline: glDrawPixels.

Images in OpenGL:Function glDrawPixels [1/3]

FragmentsVertexVertex

PixmapPixmap

Fragment Fragment

Pixmap Pixmap

VertexOperations

RasterizationFragment

OperationsFrameBuffer

VertexData

PixelOperations

PixelData

Page 11: Images in General, Images in OpenGL

24 Nov 2003 CS 381 11

Images in OpenGL:Function glDrawPixels [2/3]

Function glDrawPixels reads an image from an array and renders it at the raster position.

Five parameters: Width: Image width in pixels. Integer. Height: Image height, in pixels. Integer. Format: What data the image holds.

• Use GL_RGB if you are giving R, G, B data. If you add a 4th component (A), make this GL_RGBA.

Type: Data type in image array.• Use GL_UNSIGNED_BYTE for an array of GLubyte’s.• If you feel you need to use some other value here, I

suggest you sit down until the feeling goes away. Pixels: Pointer to the array.

Page 12: Images in General, Images in OpenGL

24 Nov 2003 CS 381 12

So, if your image array looks like this:

GLubyte img_rgb[img_height][img_width][3];

Then your glDrawPixels call looks like this:

glDrawPixels(img_width, img_height,

GL_RGB, GL_UNSIGNED_BYTE, img_rgb);

Notes Height before width in array subscripts. Width first everywhere else. Array data starts at the bottom of the image. Image files are stored

starting at the top. But we can flip an image using glPixelZoom.

Images in OpenGL:Function glDrawPixels [3/3]

Page 13: Images in General, Images in OpenGL

24 Nov 2003 CS 381 13

Path through the pipeline: glReadPixels.

Images in OpenGL:Function glReadPixels [1/2]

FragmentsVertexVertex

PixmapPixmap

Fragment Fragment

Pixmap Pixmap

VertexOperations

RasterizationFragment

OperationsFrameBuffer

VertexData

PixelOperations

PixelData

Page 14: Images in General, Images in OpenGL

24 Nov 2003 CS 381 14

Images in OpenGL:Function glReadPixels [2/2]

Function glReadPixels reads an image from the frame buffer and places it in an array.

Seven parameters: x, y: The pixel coordinates of the pixel at the

lower-left corner of the image to be read. Integers. (0,0) is the pixel at the lower-left corner of the frame buffer.

The last five parameters are the same as those for glDrawPixels.

This function does not use the raster position.

Page 15: Images in General, Images in OpenGL

24 Nov 2003 CS 381 15

Path through the pipeline: glCopyPixels.

Images in OpenGL:Function glCopyPixels [1/2]

FragmentsVertexVertex

PixmapPixmap

Fragment Fragment

Pixmap Pixmap

VertexOperations

RasterizationFragment

OperationsFrameBuffer

VertexData

PixelOperations

PixelData

Page 16: Images in General, Images in OpenGL

24 Nov 2003 CS 381 16

Images in OpenGL:Function glCopyPixels [2/2] Function glCopyPixels reads an image from the

frame buffer and renders it at the raster position.

Five parameters: x, y: Lower-left corner of pixel rectangle to read. Same

as in glReadPixels. Width, Height: Size of pixel rectangle to read & render.

Same as in glDrawPixels & glReadPixels. Type: The kind of data to copy. Use GL_COLOR. Not the

same as in glDrawPixels & glReadPixels.• Depth and stencil data can also be copied. See CS 481.

Rendering is done at the raster position. What to read is specified using pixel coordinates.

Page 17: Images in General, Images in OpenGL

24 Nov 2003 CS 381 17

Images in OpenGL:Pixel Storage Details OpenGL supports gobs & oodles of image array formats.

As usual, you can ignore most of the storage options. One option has a default value that may be unexpected.

Some processors access data faster if it is stored at an even address (or one divisible by 4, etc.).

OpenGL’s unpack alignment specifies the alignment requirements for the beginning of each row of a pixmap.

For example, if the unpack alignment is 2, the first pixel of each row will be read from an address divisible by 2. So if your image width is not even …

The unpack alignment is 1, 2, 4 (default), or 8. For a normal C/C++ array, do (in your init function?):

glPixelStorei(GL_UNPACK_ALIGNMENT, 1); In short: if you use images, do the above command.

Later, you might change that “1”, in order to improve speed.

Page 18: Images in General, Images in OpenGL

24 Nov 2003 CS 381 18

Images in OpenGL:Zooming & Flipping [1/2]

The generation of fragments during rasterization of pixmaps is controlled by glPixelZoom. Thus, glPixelZoom affects:

• Functions glDrawPixels, glCopyPixels. It does not affect:

• Functions glReadPixels, glRasterPos…, glVertex…, etc.

Two parameters: Xfactor: Horizontal zoom factor. Floating

point. Yfactor: Vertical zoom factor. Floating point.

Page 19: Images in General, Images in OpenGL

24 Nov 2003 CS 381 19

Images in OpenGL:Zooming & Flipping [2/2] Effects

If both factors are 1.0 (default), then one fragment is generated for each pixel.

Factors work like glScale…. Numbers larger than 1.0 increase the number of fragments generated for each pixel.

• Doing glPixelZoom(2., 1.) scales an image by 2 horizontally. Negative factors flip the image.

• So glPixelZoom(1., -1.) does a vertical flip.

Notes The pipeline picture tells you what effect commands have,

but their internal implementation may be different. Copying pixels using “obvious” settings (both factors 1.0)

may be done in blocks, instead of one fragment at a time. So, setting either factor to something other than 1.0 may

substantially slow down pixmap-transfer operations.

Page 20: Images in General, Images in OpenGL

24 Nov 2003 CS 381 20

Images in OpenGL:Pixel Coordinates Pixmap rendering always occurs at the raster position. Pixmap

reading occurs at a position specified in pixel coordinates. Convert between the two, if you want. Or make them the same:

void reshape(int w, int h){ glViewport(0, 0, w, h);

glMatrixMode(GL_PROJECTION); glLoadIdentity(); gluOrtho2D(0, w, 0, h);

glMatrixMode(GL_MODELVIEW); glLoadIdentity();}

Page 21: Images in General, Images in OpenGL

24 Nov 2003 CS 381 21

Images in OpenGL:Other Functions

Some other pixmap-related OpenGL calls you want want to read about (think “full credit” ): Functions glPixelTransfer…& glPixelMap….

• These affect the pixel-operations block in the image pipeline. Use them to do things like gamma correction.

Function glBitmap.• Like glDrawPixels, but for bitmaps.• Contains some features that glDrawPixels does

not: setting the origin for a bitmap to be other than the lower-left corner, and moving the raster position after drawing. (Why?)