Introduction to OpenGL (Part 3) Ref: OpenGL Programming Guide (The Red Book)

Fall 2009 revised2 Topics Part 1 Introduction Geometry Viewing Light & Material Part 2 Display List Alpha Channel Polygon Offset Part 3 Image Texture Mapping Part 4 FrameBuffers Selection & Feedback

OpenGL Pixels, Bitmaps, and Images

Fall 2009 revised4 Bitmaps A bitmap is a rectangular array of 0s and 1s that serves as a drawing mask for a rectangular portion of the window Specification: Specified, in hex codes, in one dimensional array, row by row, starting from lower-left corner Width need not be multiples of 8

Fall 2009 revised5 Bitmaps glBitmap (w, h, xbo, ybo, xbi, ybi, bitmapPtr) xbo, ybo: origin xbi, ybi: increment CRP after display glBitmap(10, 12, 0, 0, 11, 0, bitmapPtr) Fonts: series of bitmaps as display list

Fall 2009 revised6 Bitmap (cont) Note: You can't rotate bitmap fonts because the bitmap is always drawn aligned to the x and y framebuffer axes. Use glColor* to set GL_CURRENT_RASTER_COLOR

Fall 2009 revised7 Current Raster Position (CRP) OpenGL maintains raster position, a 3D-position in world coordinate Modified by: glRasterPos()  specify the object coordinates (as in glVertex); transformed by MODELVIEW & PROJECTION, passed to the clipping stage.  If the position is not culled, raster position is updated; otherwise, it is not valid. glBitmap() glGetFloatv(GL_CURRENT_RASTER_POSITION, fptr) to obtain the CRP glGetBooleanv (GL_CURRENT_RASTER_POSITION_VALID, &boolvar) to test validity of CRP

Fall 2009 revised8 drawf.c

Fall 2009 revised9 Bitmap Editor This format is called xwindow bitmap, with xbm extension Bitmaps can be created by the GIMP (GNU Image Manipulation Program)GIMP Or, seek format converters

Fall 2009 revised10 XBM Editor Link No longer available

Fall 2009 revised11 Another XBM Editor (Here)Here A simple Tk Program; require Tcl/Tk installedTcl/Tk Get tcltk for Windows from ActiveTcl ActiveTcl Note that xbm and the opengl xbitmap format is slightly different (details)details

Fall 2009 revised12 Ex: XBM Edit & Display

Fall 2009 revised13 APIs for Images (Pixel Rectangles) glReadPixels() Reading pixel data from framebuffer to processor memory. glDrawPixels() Writing pixel data from processor memory to framebuffer glCopyPixels() Copying pixel data within the framebuffer

Fall 2009 revised14 Function Arguments glReadPixels (x, y, w, h, F, T, ptr) x,y: window coordinate F: pixel format T: is data type ptr: pointer to image memory glDrawPixels (w, h, F, T, ptr) Draw to current raster position glCopyPixels (x, y, w, h, buffer) Buffer: GL_COLOR | GL_DEPTH | GL_STENCIL Equivalent to: Read then Draw

Fall 2009 revised15 More on glCopyPixels Note that there's no need for a format or data parameter for glCopyPixels(), since the data is never copied into processor memory. The read source buffer and the destination buffer of glCopyPixels() are specified by glReadBuffer() and glDrawBuffer() respectively Default:  single-buffer: GL_FRONT  Double-buffered: GL_BACK

Fall 2009 revised16 Pixel Format GREY SCALE GREY SCALE with alpha

Fall 2009 revised17 Data Type

Fall 2009 revised18 Example 255: 0xFF See also image.c for CopyPixels

Fall 2009 revised19 Example image.c Copy the lower left corner to the CRP (where the mouse is) For single-buffer version, only GL_FRONT is involved While motion is in action, display is not called Double-buffer version: [from the API doc] glutSwapBuffers promotes the contents of the back buffer to become the contents of the front buffer. The contents of the back buffer then become undefined. Reality is … two have same content

Fall 2009 revised20 PixelZoom (xfactor,yfactor) Enlarge/shrink images Use negative factors for reflected images

Fall 2009 revised21 Image Loader (TGA) simple TGA utility in gluit.rar only load and save uncompressed images in greyscale, RGB or RGBA mode. Info in TGA header: image type [unsigned char]  1 - colour map image  2 - RGB(A) uncompressed  3 - greyscale uncompressed  9 - greyscale RLE (compressed)  10 - RGB(A) RLE (compressed) pixel depth [unsigned char]  8 – greyscale | 24 – RGB | 32 - RGBA

Fall 2009 revised22 Image Loader (PNG)PNG Offline; Local copy at webhd2:game-lib

Fall 2009 revised23 DevIL

Fall 2009 revised24 int pngLoadRaw (filename,rawinfo) Must be freed manually

Fall 2009 revised25 Remark Most graphics formats have image origin at upper/left corner While OpenGL has the image origin at lower/left corner Hence, if no correction is done, every image is drawn upside down. Correction in PNG loader: pngSetStandardOrientation (1);

Fall 2009 revised26 Imaging Pipeline

Fall 2009 revised27 Imaging Pipeline(cont.) glPixelStore() Controlling Pixel-Storage Modes glPixelStorei(GL_UNPACK_ALIGNMENT, 1);  Packing and unpacking refer to the way that pixel data is written to and read from processor memory.  tells OpenGL not to skip bytes at the end of a row

Fall 2009 revised28 PixelStorei(GL_UNPACK_ALIGNMENT, x) Specifies the alignment requirements for the start of each pixel row in memory. The allowable values are: 1 (byte-alignment), 2 (rows aligned to even-numbered bytes), 4 (word-alignment [default]), and 8 (rows start on double-word boundaries). Byte:8-bit Word:16-bit Double-word:32-bit Byte:8-bit Word:16-bit Double-word:32-bit

Fall 2009 revised29 Details Byte aligned (1) In client memory, the start of each row of pixels is … w=3,h=2 Assuming the RGB image is of size 3x2: (three bytes per pixel) 1st row 2nd row Double word aligned (8) Aligned to even bytes (2); Word aligned (4)

Fall 2009 revised30 Settings For RGBA images, it doesn ’ t matter (each pixel has 4 bytes: RGBARGBA … ) For RGB and luminance images and images with odd width, it should be set to byte-aligned (data are densely packed) glPixelStorei(GL_UNPACK_ALIGNMENT, 1) glPixelStorei(GL_UNPACK_ALIGNMENT, 4)

Fall 2009 revised31 Improving Pixel Pipeline Performance A series of fragment operations is applied to pixels as they are drawn into the framebuffer. For optimum performance, disable all fragment operations (depth test, … ) While performing pixel operations, disable other costly states, such as texturing and lighting It is usually faster to draw a large pixel rectangle than to draw several small ones, since the cost of transferring the pixel data can be amortized ( 分攤 ) over many pixels

Fall 2009 revised32 Example (depthbuffershow) Get depth buffer content glReadPixels() Reverse and scale! Near (white) far (black) Display it as a luminance image glDrawPixels()

Fall 2009 revised33 Example (rasterpos3) Illustrate that CRP is a point in R3 Image displayed is always parallel to projection plane Fake perspective by zooming with distance to camera

Fall 2009 revised34 Example (sprite) Process sprite image Add alpha layer Load png image Sprite animation “ feel of depth ” Back-to-front rendering pixelzoom

Sprites on Google … Fall 2009 revised35 (ref)ref (ref)ref

Fall 2009 revised36 Ex: Display Depth Buffer Content nthsurfdemo.c

Fall 2009 revised37 Ex: Paint [front] [back] At the mouse click, the back buffer blends with front

OpenGL Texture Mapping (Introduction)Introduction

Fall 2009 revised39 Texture Mapping A way to render realistic picture w/o using too many polygons Parallax mapping

Fall 2009 revised40 Texture Coordinate System Texture: a 2D array of color values, each unit is called texel (texture element) Every texture map has (s,t) coordinates [0,0] to [1,1] Each vertex in a polygon specifies its texture coordinates (s,t), then map to the given image to determine the corresponding texture

Fall 2009 revised41 Example Screen space view OpenGL code Texture Map Texture space view

Fall 2009 revised42 Example Screen space view OpenGL code Texture space view Texture Map BACK

End of Part 3

Fall 2009 revised44 Results from Xbm Editor From top to bottom Byte swapping #define sample_width 16 #define sample_height 10 static char sample_bits[] = { 0xff,0x00, 0x00,0xff, 0x00,0x00, 0x07,0xe0, 0x00,0x00, 0xf0,0xf8, 0x00,0x00, 0x00,0x00};

Fall 2009 revised45 Converting to OpenGL Bitmap Bottom to top & byte swapping #define sample_width 16 #define sample_height 10 static char sample_bits[] = { 0x00,0x00, 0x0f,0x1f, 0x00,0x00, 0xe0,0x07, 0x00,0x00, 0x00,0xff, 0xff,0x00};

Fall 2009 revised46 Solution Byte swap: resolved by glPixelStorei (GL_UNPACK_LSB_FIRST, 1); Bottom to top: Recall width of bitmap need not be multiples of 8, but it is stored in units of unsigned characters But, the XBM Editor only allows width of multiples of 8 (8,16,24, … ) See the example code on reading it reversely

Fall 2009 revised47 (almost) Useless API! There seems to no way to make the bitmap larger (than it should be, pixels) glPixelZoom won ’ t work! Therefore, its use is limited Nevertheless, the color is free to change … BACK