CSE 40166 (Notre Dame) Computer Graphics Lecture 16 A Simple Draw Image Example More Texture Mapping Simple OpenGL Image Library (SOIL) Transparency &

CSE 40166 (Notre Dame)Computer Graphics

Lecture 16

A Simple Draw Image ExampleMore Texture Mapping

Simple OpenGL Image Library (SOIL)Transparency & Blending

Masking with Bitmaps

Simple ExampleLoad and Draw an Image Load image

unsigned char *pixels; int height, width, channels; pixels = SOIL_load_image(“dome.jpg”, &width, &height,

&channels, SOIL_LOAD_AUTO); Set Position in Raster

glRasterPos2i(0,0); // center of raster Flip to see image upright

glScalePixels(1.0,-1.0); // flip vertically here Draw the pixels

glDrawPixels(width,height,pixels, GL_RGB, GL_UNSIGNED_BYTE, pixels);

Free memory when done SOIL_free_image_data(pixels);

3Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

Raster Position (reminder)

The raster position is part of the OpenGL stateSet by glRasterPos*()

glRasterPos3f(x, y, z);

The raster position is a geometric entityPasses through geometric pipelineEventually yields a 2D position in screen coordinatesThis position in the frame buffer is where the next raster

primitive is drawnThis also LOCKS the raster (drawing) color which affects

use of BIT MAPS as MASKS


Bitmaps are MASKS

OpenGL treats 1-bit pixels (bitmaps) differently from multi-bit pixels (pixelmaps)

Bitmaps are masks that determine if the corresponding pixel in the frame buffer is drawn with the present raster color

0 color unchanged1 color changed based on writing mode

Bitmaps are useful for raster textGLUT font: GLUT_BIT_MAP_8_BY_13

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

Geometry drawn in blueOnes in bitmap use a drawing color of red


Raster Color

glColor3f(1.0, 0.0, 0.0); // set color REDglRasterPos3f(x, y, z); // fix as raster colorglColor3f(0.0, 0.0, 1.0); // set color BLUEglBitmap(……. // set MASKglBegin(GL_LINES); glVertex3f(…..) // draw/create something


Drawing Bitmaps (reminder)

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

first raster position.Set prior to calling glBitmap()

second raster position

offset from raster position

increments in raster position after bitmap drawn


Example: Checker Board

GLubyte wb[2] = {0x00, 0xff};GLubyte check[512];int i, j;for(i=0; i<64; i++) for (j=0; j<8, j++) // 8 bytes (64 bits) per row check[i*8+j] = wb[(i/8+j)%2];glBitmap( 64, 64, 0.0, 0.0, 0.0, 0.0, check);

Another Example BitMapMy Own Lettering

Create a bitmap of text in Paint program Save as Hi_128.jpg & Lo_128.jpg Load as image using SOIL Convert bytes to bits (and flip) if needed

SOIL_load_image() will not do this for you Set color and raster position Draw the bitmap

glDrawBitmap(height,width,0,0,0,0,bits);

My Lettering

Original Bitmap

Shown on Screen

My Lettering (display code)

glColor3ub(255,0,0); // set color REDglRasterPos2i(-100,0); // lock color & go to -100,0glBitmap(128,128,0.0,0.0,0.0,0.0,bitmapHI.pixels);

glColor3ub(255,255,0); // set color YELLOWglRasterPos2i(0,40); // lock color & go to -100,0glBitmap(128,128,0.0,0.0,0.0,0.0,bitmapLO.pixels);

See example (hilo)

Shows the following Loading and converting image to bitmap Setting color and position Drawing bitmap Background and images show through the bitmap

mask


Pixel Maps

OpenGL works with rectangular arrays of pixels called pixel maps or images

Pixels are in one byte ( 8 bit) chunksLuminance (gray scale) images 1 byte/pixelRGB 3 bytes/pixel

Three functionsDraw pixels: processor memory to frame bufferRead pixels: frame buffer to processor memoryCopy pixels: frame buffer to frame buffer


OpenGL Pixel Functions

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

start pixel in frame buffer size

type of image

type 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 current raster position

Look at Example (showPic)

Shows the following ... Loading images using SOIL_load_image() Flipping vertically Image is NOT scaled and is always anchored at

given raster position


Texture Mapping in OpenGL --Basic Strategy

Three steps to applying a texture1. specify the texture

read or generate image assign to texture enable texturing

2. assign texture coordinates to vertices Proper mapping function is left to application

3. specify texture parameters wrapping, filtering


Texture Mapping

s

t

x

y

z

image

geometry display


Define a texture image from an array of texels (texture elements) in CPU memory Glubyte my_texels[512][512];

Define as any other pixel mapScanned imageGenerate by application code

Enable texture mappingglEnable(GL_TEXTURE_2D)OpenGL supports 1-4 dimensional texture maps

Specifying a Texture Image


Define Image as a Texture

glTexImage2D( target, level, components, w, h, border, format, type, texels );

target: type of texture, e.g. GL_TEXTURE_2D level: used for mipmapping (discussed later) components: elements per texel w, h: width and height of texels in pixels border: used for smoothing (discussed later) format and type: describe texels texels: pointer to texel array

glTexImage2D(GL_TEXTURE_2D, 0, 3, 512, 512, 0, GL_RGB, GL_UNSIGNED_BYTE, my_texels);


Converting A Texture Image

OpenGL requires texture dimensions to be powers of 2

If dimensions of image are not powers of 2gluScaleImage( format, w_in, h_in, type_in, *data_in, w_out, h_out,

type_out, *data_out );data_in is source imagedata_out is for destination image

Image interpolated and filtered during scaling


Based on parametric texture coordinatesglTexCoord*() specified at each vertex

s

t1, 1

0, 1

0, 0 1, 0

(s, t) = (0.2, 0.8)

(0.4, 0.2)

(0.8, 0.4)

A

B C

a

bc

Texture Space Object Space

Mapping a Texture


Typical Code

glBegin(GL_POLYGON);glColor3f(r0, g0, b0); //if no shading usedglNormal3f(u0, v0, w0); // if shading usedglTexCoord2f(s0, t0);glVertex3f(x0, y0, z0);glColor3f(r1, g1, b1);glNormal3f(u1, v1, w1);glTexCoord2f(s1, t1);glVertex3f(x1, y1, z1);

.

.glEnd();

Note that we can use vertex arrays to increase efficiency


Interpolation

OpenGL uses interpolation to find proper texels from specified texture coordinates

Can be distortions

good selectionof tex coordinates

poor selectionof tex coordinates

texture stretchedover trapezoid showing effects of bilinear interpolation


Texture Parameters

OpenGL has a variety of parameters that determine how texture is applied

Wrapping parameters determine what happens if s and t are outside the (0,1) range

Filter modes allow us to use area averaging instead of point samples

Mipmapping allows us to use textures at multiple resolutions

Environment parameters determine how texture mapping interacts with shading


Wrapping Mode

Clamping: if s,t > 1 use 1, if s,t <0 use 0Wrapping: use s,t modulo 1

glTexParameteri( GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP )

glTexParameteri( GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT )

texture

s

t

GL_CLAMPwrapping

GL_REPEATwrapping


Magnification and Minification

Texture Polygon

Magnification Minification

PolygonTexture

More than one texel can cover a pixel (minification) ormore than one pixel can cover a texel (magnification)

Can use point sampling (nearest texel) or linear filtering( 2 x 2 filter) to obtain texture values


Filter Modes

Modes determined byglTexParameteri( target, type, mode )

glTexParameteri(GL_TEXTURE_2D, GL_TEXURE_MAG_FILTER, GL_NEAREST);

glTexParameteri(GL_TEXTURE_2D, GL_TEXURE_MIN_FILTER, GL_LINEAR);

Note that linear filtering requires a border of an extra texel for filtering at edges (border = 1)


Mipmapped Textures

Mipmapping allows for prefiltered texture maps of decreasing resolutions

Lessens interpolation errors for smaller textured objects

Declare mipmap level during texture definitionglTexImage2D( GL_TEXTURE_*D, level, … )

GLU mipmap builder routines will build all the textures from a given imagegluBuild*DMipmaps( … )


Example

pointsampling

mipmapped pointsampling

mipmapped linear filtering

linear filtering


Texture Functions

Controls how texture is applied glTexEnv{fi}[v]( GL_TEXTURE_ENV, prop, param

) GL_TEXTURE_ENV_MODE modes

GL_MODULATE: modulates with computed shade GL_BLEND: blends with an environmental color GL_REPLACE: use only texture color GL(GL_TEXTURE_ENV, GL_TEXTURE_ENV_MODE, GL_MODULATE);

Set blend color with GL_TEXTURE_ENV_COLOR


Perspective Correction Hint

Texture coordinate and color interpolationeither linearly in screen spaceor using depth/perspective values (slower)

Noticeable for polygons “on edge”glHint( GL_PERSPECTIVE_CORRECTION_HINT, hint )

where hint is one of GL_DONT_CAREGL_NICESTGL_FASTEST


Generating Texture Coordinates

OpenGL can generate texture coordinates automatically

glTexGen{ifd}[v]()specify a plane

generate texture coordinates based upon distance from the plane

generation modesGL_OBJECT_LINEARGL_EYE_LINEAR GL_SPHERE_MAP (used for environmental maps)

Using Textures and Solids

gluQuadrics Provide texture coordinates Are easily wrapped with a texture

glutSolid* Require you to establish your own texture coords Mappings are either plane based or eye based

See Earth Globe example


Texture Objects

Texture is part of the OpenGL state If we have different textures for different objects,

OpenGL will be moving large amounts data from processor memory to texture memory

Recent versions of OpenGL have texture objectsone image per texture objectTexture memory can hold multiple texture objects


Applying Textures II

1. specify textures in texture objects2. set texture filter 3. set texture function 4. set texture wrap mode5. set optional perspective correction hint6. bind texture object 7. enable texturing8. supply texture coordinates for vertex

coordinates can also be generated


Other Texture Features

Environment MapsStart with image of environment through a wide

angle lens Can be either a real scanned image or an image

created in OpenGLUse this texture to generate a spherical mapUse automatic texture coordinate generation

MultitexturingApply a sequence of textures through cascaded

texture units

SOIL – Load image as textureGLuint loadTex (string filename){ // use SOIL to load a texture from an image file GLuint tex_ID = SOIL_load_OGL_texture ( filename.c_str(), // from this image file SOIL_LOAD_AUTO, // auto load image SOIL_CREATE_NEW_ID, // & create new texture

(SOIL_FLAG_MIPMAPS | SOIL_FLAG_INVERT_Y |

SOIL_FLAG_NTSC_SAFE_RGB | SOIL_FLAG_COMPRESS_TO_DXT) ); if( tex_ID > 0 ) { // if texture got created glEnable( GL_TEXTURE_2D ); // enable texture mapping glBindTexture( GL_TEXTURE_2D, tex_ID ); // & bind this one return tex_ID; // return texture id } return 0; // return 0 if no texture created}

SOIL usage

Loading two images as textures GLuint tex01_2d, tex02_2d;

tex01_2d = loadTex("dome1.jpg");

tex02_2d = loadTex("dome2.jpg");

Setting active texture (binding) glBindTexture(GL_TEXTURE_2D, tex02_2d);

SOIL usage Specifying texture coordinates

void drawSquare (point3 a, point3 b, point3 c, point3 d){

glBegin(GL_POLYGON);glTexCoord2f(0.0,0.0); // lower leftglVertex3fv(a);glTexCoord2f(1.0,0.0); // lower rightglVertex3fv(b);glTexCoord2f(1.0,1.0); // upper rightglVertex3fv(c);glTexCoord2f(0.0,1.0); // upper leftglVertex3fv(d);

glEnd();}


Blending & Compositing Objectives

Learn to use the A component in RGBA color for

Blending for translucent surfacesCompositing imagesAntialiasing


Opacity and Transparency

Opaque surfaces permit no light to pass throughTransparent surfaces permit all light to passTranslucent surfaces pass some light

translucency = 1 – opacity ()

opaque surface =1


Physical Models

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

the complexity of the internal interactions of light and matter

Using a pipeline renderer


Writing Model

Use A component of RGBA (or RGB) color to store opacity

During rendering we can expand our writing model to use RGBA values

Color Buffer

destinationcomponent

blend

destination blending factor

source blending factor sourcecomponent


Blending Equation

We can define source and destination blending factors for each RGBA component

s = [sr, sg, sb, s]

d = [dr, dg, db, d]

Suppose that the source and destination colors are

b = [br, bg, bb, b]

c = [cr, cg, cb, c]

Blend as

c’ = [br sr+ cr dr, bg sg+ cg dg , bb sb+ cb db , b s+ c d ]


OpenGL Blending and Compositing

Must enable blending and pick source and destination factors

glEnable(GL_BLEND) glBlendFunc(source_factor,

destination_factor)Only certain factors supported

GL_ZERO, GL_ONEGL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHAGL_DST_ALPHA, GL_ONE_MINUS_DST_ALPHASee Redbook for complete list


Example

Suppose that we start with the opaque background color (R0,G0,B0,1)

This color becomes the initial destination colorWe now want to blend in a translucent polygon with

color (R1,G1,B1,1)Select GL_SRC_ALPHA and GL_ONE_MINUS_SRC_ALPHA

as the source and destination blending factors

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

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


Clamping and Accuracy

All the components (RGBA) are clamped and stay in the range (0,1)

However, in a typical system, RGBA values are only stored to 8 bits

Can easily loose accuracy if we add many components together

Example: add together n imagesDivide all color components by n to avoid clampingBlend with source factor = 1, destination factor = 1But division by n loses bits


Order Dependency

Is this image correct?Probably notPolygons are rendered

in the order they pass

down the pipelineBlending functions

are order dependent


Opaque and Translucent Polygons

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

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

and affect the depth bufferTranslucent polygons should not affect depth buffer

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

Sort polygons first to remove order dependency


Fog

We can composite with a fixed color and have the blending factors depend on depth

Simulates a fog effectBlend source color Cs and fog color Cf by

Cs’=f Cs + (1-f) Cf

f is the fog factorExponentialGaussianLinear (depth cueing)


Fog Functions


OpenGL Fog Functions

GLfloat fcolor[4] = {……}:

glEnable(GL_FOG);glFogf(GL_FOG_MODE, GL_EXP);glFogf(GL_FOG_DENSITY, 0.5);glFogv(GL_FOG, fcolor);


Line Aliasing

Ideal raster line is one pixel wideAll line segments, other than vertical and horizontal segments, partially cover pixels

Simple algorithms color

only whole pixelsLead to the “jaggies”

or aliasingSimilar issue for polygons


Antialiasing

Can try to color a pixel by adding a fraction of its color to the frame buffer

Fraction depends on percentage of pixel covered by fragment

Fraction depends on whether there is overlap

no overlap overlap


Area Averaging

Use average area 1+2-12 as blending factor


OpenGL Antialiasing

Can enable separately for points, lines, or polygons

glEnable(GL_POINT_SMOOTH);glEnable(GL_LINE_SMOOTH);glEnable(GL_POLYGON_SMOOTH);

glEnable(GL_BLEND);glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);


Accumulation Buffer

Compositing and blending are limited by resolution of the frame buffer

Typically 8 bits per color componentThe accumulation buffer is a high resolution buffer

(16 or more bits per component) that avoids this problem

Write into it or read from it with a scale factorSlower than direct compositing into the frame buffer


Applications

CompositingImage Filtering (convolution)Whole scene antialiasingMotion effects

Thanks to …

Many slides in this presentation have been used from Edward Angel’s PowerPoint lectures at UMN.

In some cases slides have been modified to suit this class

Any errors or omissions may be attributed to J H Stewman

Documents

CSE 40166 (Notre Dame) Computer Graphics Lecture 16 A Simple Draw Image Example More Texture Mapping Simple OpenGL Image Library (SOIL) Transparency &