Objectives Objectives

Introduce OpenGL buffers and read/writeIntroduce OpenGL buffers and read/write Introduce texture mappingIntroduce texture mapping Introduce BlendingIntroduce Blending

CSC461: Lecture 25CSC461: Lecture 25Discrete TechniquesDiscrete Techniques

BuffersBuffers Define a buffer by its spatial Define a buffer by its spatial

resolution (n x m) and its depth resolution (n x m) and its depth k, the number of bits/pixelk, the number of bits/pixel

pixel

OpenGL BuffersOpenGL Buffers

Writing in BuffersWriting in Buffers Conceptually, we can consider all of memory as a large Conceptually, we can consider all of memory as a large

two-dimensional array of pixelstwo-dimensional array of pixels We read and write rectangular block of pixelsWe read and write rectangular block of pixels

Bit block transferBit block transfer ( (bitbltbitblt) ) operationsoperations The frame buffer is part of this memoryThe frame buffer is part of this memory

Read destination pixel Read destination pixel before writing sourcebefore writing source

frame buffer(destination)

writing into frame buffersource

memory

Writing ModesWriting Modes Source and destination bits are combined bitwiseSource and destination bits are combined bitwise 16 possible functions (one per column in table)16 possible functions (one per column in table) XOR is especially useful for swapping blocks of memory such as XOR is especially useful for swapping blocks of memory such as

menus that are stored off screenmenus that are stored off screen

replace ORXOR

The Pixel PipelineThe Pixel Pipeline OpenGL has a separate pipeline for pixelsOpenGL has a separate pipeline for pixels

Writing pixels involves Writing pixels involves Moving pixels from processor memory to the frame bufferMoving pixels from processor memory to the frame buffer Format conversionsFormat conversions Mapping, Lookups, TestsMapping, Lookups, Tests

Reading pixelsReading pixels Format conversionFormat conversion

Raster PositionRaster Position OpenGL maintains a OpenGL maintains a raster positionraster position as part of the state as part of the state Set by Set by glRasterPos*(); glRasterPos3f(x,y,z);glRasterPos*(); glRasterPos3f(x,y,z); The raster position is a geometric entityThe raster position is a geometric entity

Passes through geometric pipelinePasses through geometric pipeline Eventually yields a 2D position in screen coordinatesEventually yields a 2D position in screen coordinates This position in the frame buffer is where the next raster This position in the frame buffer is where the next raster

primitive is drawnprimitive is drawn

Buffer SelectionBuffer Selection OpenGL can draw into or read from any of the color buffers OpenGL can draw into or read from any of the color buffers

(front, back, auxiliary) with default to the back buffer(front, back, auxiliary) with default to the back buffer Change withChange with glDrawBuffer glDrawBuffer andand glReadBufferglReadBuffer Note that format of the pixels in the frame buffer is different Note that format of the pixels in the frame buffer is different

from that of processor memory and these two types of memory from that of processor memory and these two types of memory reside in different placesreside in different places Need packing and unpackingNeed packing and unpacking Drawing and reading can be slowDrawing and reading can be slow

BitmapsBitmaps OpenGL treats 1-bit pixels (OpenGL treats 1-bit pixels (bitmapsbitmaps) differently than multi-bit ) differently than multi-bit

pixels (pixels (pixelmapspixelmaps)) Bitmaps are masks which determine if the corresponding pixel in Bitmaps are masks which determine if the corresponding pixel in

the frame buffer is drawn with the the frame buffer is drawn with the present raster colorpresent raster color 0 0 color unchanged, 1 color unchanged, 1 color changed based on writing mode color changed based on writing mode

Bitmaps are useful for raster text: Bitmaps are useful for raster text: GLUT_BIT_MAP_8_BY_13GLUT_BIT_MAP_8_BY_13

Raster ColorRaster Color Same as drawing color set by Same as drawing color set by glColor*()glColor*() Fixed by last call to Fixed by last call to glRasterPos*()glRasterPos*()

glColor3f(1.0, 0.0, 0.0);

glRasterPos3f(x, y, z);

glColor3f(0.0, 0.0, 1.0);

glBitmap(…….

glBegin(GL_LINES);

glVertex3f(…..)

Geometry drawn in blueGeometry drawn in blue Ones in bitmap use a drawing color of redOnes in bitmap use a drawing color of red

Drawing BitmapsDrawing Bitmaps

glBitmap(width, height, x0, y0, xi, yi, bitmap)glBitmap(width, height, x0, y0, xi, yi, bitmap)

first raster position

second raster position

offset from raster position

increments in raster position after bitmap drawn

Pixel MapsPixel Maps OpenGL works with rectangular arrays of pixels called pixel OpenGL works with rectangular arrays of pixels called pixel

maps or imagesmaps or images Pixels are in one byte ( 8 bit) chunksPixels are in one byte ( 8 bit) chunks

Luminance (gray scale) images 1 byte/pixelLuminance (gray scale) images 1 byte/pixel RGB 3 bytes/pixelRGB 3 bytes/pixel

Three functionsThree functions Draw pixels: processor memory to frame bufferDraw pixels: processor memory to frame buffer Read pixels: frame buffer to processor memoryRead pixels: frame buffer to processor memory Copy pixels: frame buffer to frame bufferCopy pixels: frame buffer to frame buffer

glReadPixels(x,y,width,height,format,type,myimage)

start pixel in frame buffersize

type of imagetype of pixels

pointer to processor memory

GLubyte myimage[512][512][3];glReadPixels(0,0,512,512,GL_RGB,GL_UNSIGNED_BYTE,myimage);

glDrawPixels(width,height,format,type,myimage)starts at raster position

Image FormatsImage Formats We often work with images in a standard format (JPEG, TIFF, GIF)We often work with images in a standard format (JPEG, TIFF, GIF) How do we read/write such images with OpenGL?How do we read/write such images with OpenGL? No support in OpenGLNo support in OpenGL

OpenGL knows nothing of image formatsOpenGL knows nothing of image formats Some code available on WebSome code available on Web Can write readers/writers for some simple formats in OpenGL such as Can write readers/writers for some simple formats in OpenGL such as

PPM imagePPM image We can scale the image in the pipelineWe can scale the image in the pipeline

glPixelTransferf(GL_RED_SCALE, s);glPixelTransferf(GL_RED_SCALE, s);glPixelTransferf(GL_GREEN_SCALE, s);glPixelTransferf(GL_GREEN_SCALE, s);glPixelTransferf(GL_BLUE_SCALE, s);glPixelTransferf(GL_BLUE_SCALE, s);

We may have to swap bytes when we go from processor memory We may have to swap bytes when we go from processor memory to the frame buffer depending on the processor. If so we need can to the frame buffer depending on the processor. If so we need can useuse

glPixelStorei(GL_UNPACK_SWAP_BYTES,GL_TRUE);glPixelStorei(GL_UNPACK_SWAP_BYTES,GL_TRUE);

Texture MappingTexture Mapping The Limits of Geometric Modeling: Although graphics cards The Limits of Geometric Modeling: Although graphics cards

can render over 10 million polygons per second, that number can render over 10 million polygons per second, that number is insufficient for many phenomena, such as is insufficient for many phenomena, such as Clouds, Grass, Clouds, Grass, Terrain, SkinTerrain, Skin

Modeling an OrangeModeling an Orange Consider the problem of modeling an orange (the fruit)Consider the problem of modeling an orange (the fruit) Start with an orange-colored sphereStart with an orange-colored sphere

Too simpleToo simple Replace sphere with a more complex shapeReplace sphere with a more complex shape

Does not capture surface characteristics (small dimples)Does not capture surface characteristics (small dimples) Takes too many polygons to model all the dimplesTakes too many polygons to model all the dimples

Take a picture of a real orange, scan it, and “paste” onto simple Take a picture of a real orange, scan it, and “paste” onto simple geometric modelgeometric model

This process is texture mappingThis process is texture mapping Still might not be sufficient because resulting surface will be smoothStill might not be sufficient because resulting surface will be smooth

Need to change local shapeNeed to change local shape Bump mappingBump mapping

Texture MappingTexture Mapping Uses images to fill inside of polygonsUses images to fill inside of polygons

Environmental (reflection mapping)Environmental (reflection mapping) Uses a picture of the environment for texture mapsUses a picture of the environment for texture maps Allows simulation of highly specular surfacesAllows simulation of highly specular surfaces

Bump mappingBump mapping Emulates altering normal vectors during the rendering Emulates altering normal vectors during the rendering

process)process)

Three Types of MappingThree Types of Mapping

geometric model Texture Mapping Environmental Bump mapping

Where and How ?Where and How ? Mapping techniques are implemented at the end of the rendering Mapping techniques are implemented at the end of the rendering

pipelinepipeline Very efficient because few polygons pass down the geometric pipelineVery efficient because few polygons pass down the geometric pipeline

Although the idea is simple---map an image to a surface---there Although the idea is simple---map an image to a surface---there are 3 or 4 coordinate systems involvedare 3 or 4 coordinate systems involved Parametric coordinates -- May be used to model curved surfacesParametric coordinates -- May be used to model curved surfaces Texture coordinates -- Used to identify points in the image to be mappedTexture coordinates -- Used to identify points in the image to be mapped World Coordinates -- Conceptually, where the mapping takes placeWorld Coordinates -- Conceptually, where the mapping takes place Screen Coordinates -- Where the final image is really producedScreen Coordinates -- Where the final image is really produced

Texture Mapping ProcessTexture Mapping Process

parametric coordinatesparametric coordinates

texture coordinatestexture coordinates

world coordinates

screen coordinates

Mapping FunctionsMapping Functions Basic problem is how to find the mapsBasic problem is how to find the maps

Forward mapping – from object points to pixelsForward mapping – from object points to pixels Backward mapping – from pixels to object pointsBackward mapping – from pixels to object points Such functions are difficult to find in generalSuch functions are difficult to find in general

One solution -- Two-part mappingOne solution -- Two-part mapping First map the texture to a simple intermediate surface, such asFirst map the texture to a simple intermediate surface, such as

Cylindrical MappingCylindrical Mapping Spherical MapSpherical Map Box MappingBox Mapping

Second map from intermediate object to actual objectSecond map from intermediate object to actual object Normals from intermediate to actualNormals from intermediate to actual Normals from actual to intermediateNormals from actual to intermediate Vectors from center of intermediateVectors from center of intermediate

AliasingAliasing Point sampling of the texture can lead to aliasing errorsPoint sampling of the texture can lead to aliasing errors

point samples in texture space

point samples in u,v (or x,y,z) space

miss blue stripes

A better but slower option is to use A better but slower option is to use area averagingarea averaging

Note that the preimage of pixel is curved

pixelpreimage

Opacity and TransparencyOpacity and Transparency Opaque surfaces permit no light to pass throughOpaque surfaces permit no light to pass through Transparent surfaces permit all light to passTransparent surfaces permit all light to pass Translucent surfaces pass some lightTranslucent surfaces pass some light translucency = 1 – opacity (translucency = 1 – opacity ()) Physical ModelsPhysical Models

Dealing with translucency in a physically correct manner is difficult Dealing with translucency in a physically correct manner is difficult due todue to

the complexity of the internal interactions of light and matterthe complexity of the internal interactions of light and matter Using a pipeline rendererUsing a pipeline renderer Revert to writing modelRevert to writing model

Writing ModelWriting Model Use A component of RGBA (or RGBUse A component of RGBA (or RGB) color to ) color to

store opacitystore opacity During rendering we can expand our writing model During rendering we can expand our writing model

to use RGBA values to use RGBA values

Color Buffer

destinationcomponent

blend

destination blending factor

source blending factor sourcecomponent

Blending EquationBlending Equation We can define source and destination blending We can define source and destination blending

factors for each componentfactors for each component

ss = [s = [srr, s, sgg, s, sbb, s, s]]

dd = [d = [drr, d, dgg, d, dbb, d, d]]

source and destination colorssource and destination colors

bb = [b = [brr, b, bgg, b, bbb, b, b]]

cc = [c = [crr, c, cgg, c, cbb, c, c]]

Blend asBlend as

c’ = [bc’ = [br r ssrr+ c+ cr r ddrr, b, bg g ssgg+ c+ cg g ddg g , b, bb b ssbb+ c+ cb b ddb b , b, b ss+ c+ c dd ]]

OpenGL Blending and CompositingOpenGL Blending and Compositing

Must enable blending and pick source and Must enable blending and pick source and destination factorsdestination factors

glEnable(GL_BLEND)glEnable(GL_BLEND) glBlendFunc(source_factor, glBlendFunc(source_factor, destination_factor)destination_factor) Only certain factors supportedOnly certain factors supported

GL_ZERO, GL_ONEGL_ZERO, GL_ONE GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHAGL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA GL_DST_ALPHA, GL_ONE_MINUS_DST_ALPHAGL_DST_ALPHA, GL_ONE_MINUS_DST_ALPHA See Redbook for complete listSee Redbook for complete list

ExampleExample Suppose that we start with the opaque background Suppose that we start with the opaque background

color (Rcolor (R00,G,G00,B,B00,1) ,1) This color becomes the initial destination colorThis color becomes the initial destination color

We now want to blend in a translucent polygon We now want to blend in a translucent polygon with color (Rwith color (R11,G,G11,B,B11,,11))

Select Select GL_SRC_ALPHAGL_SRC_ALPHA and and GL_ONE_MINUS_SRC_ALPHAGL_ONE_MINUS_SRC_ALPHA as the source and as the source and destination blending factorsdestination blending factors

RR’’1 1 = = 11 R R1 1 +(1- +(1- 11) R) R0, 0, …… ……

Note this formula is correct if polygon is either Note this formula is correct if polygon is either opaque or transparentopaque or transparent

Opaque and Translucent PolygonsOpaque and Translucent Polygons

Suppose that we have a group of polygons some of Suppose that we have a group of polygons some of which are opaque and some translucentwhich are opaque and some translucent

How do we use hidden-surface removal?How do we use hidden-surface removal? Opaque polygons block all polygons behind them Opaque polygons block all polygons behind them

and affect the depth bufferand affect the depth buffer Translucent polygons should not affect depth bufferTranslucent polygons should not affect depth buffer

Render with Render with glDepthMask(GL_FALSE)glDepthMask(GL_FALSE) which makes which makes depth buffer read-onlydepth buffer read-only

Sort polygons first to remove order dependencySort polygons first to remove order dependency

FogFog We can composite with a fixed color and have the blending We can composite with a fixed color and have the blending

factors depend on depthfactors depend on depth Simulates a fog effectSimulates a fog effect

Blend source color CBlend source color Css and fog color C and fog color Cf f by by

CCss’=f C’=f Css + (1-f) C + (1-f) Cff

f is the f is the fog factorfog factor ExponentialExponential GaussianGaussian Linear (depth cueing)Linear (depth cueing)

OpenGL Fog FunctionsOpenGL Fog Functions

GLfloat fcolor[4] = {……};GLfloat fcolor[4] = {……};glEnable(GL_FOG);glEnable(GL_FOG);glFogf(GL_FOG_MODE, GL_EXP);glFogf(GL_FOG_MODE, GL_EXP);glFogf(GL_FOG_DENSITY, 0.5);glFogf(GL_FOG_DENSITY, 0.5);glFOgv(GL_FOG, fcolor);glFOgv(GL_FOG, fcolor);

Line Aliasing and AntialiasingLine Aliasing and Antialiasing Ideal raster line is one pixel wideIdeal raster line is one pixel wide All line segments, other than vertical and horizontal All line segments, other than vertical and horizontal

segments, partially cover pixelssegments, partially cover pixels Simple algorithms color only whole pixelsSimple algorithms color only whole pixels Lead to the “jaggies” or aliasingLead to the “jaggies” or aliasing Similar issue for polygonsSimilar issue for polygons Can try to color a pixel by adding a fraction of its Can try to color a pixel by adding a fraction of its

color to the frame buffercolor to the frame buffer Fraction depends on percentage of pixel covered Fraction depends on percentage of pixel covered

by fragment by fragment Fraction depends on whether there is overlapFraction depends on whether there is overlap

Use average area Use average area 11++22--1122 as blending factor as blending factor OpenGL AntialiasingOpenGL Antialiasing

glEnable(GL_POINT_SMOOTH);glEnable(GL_LINE_SMOOTH);glEnable(GL_POLYGON_SMOOTH);glEnable(GL_BLEND);glBlendFunc(GL_SRC_ALPHA,

GL_ONE_MINUS_SRC_ALPHA);