3D Game Programming2D primitive

Ming-Te ChiDepartment of Computer Science, 

National Chengchi University

Outline

Imaging and Raster Primitives(4rd ch7)

Alpha and blending (4rd ch6) (6th ch9)

IMAGING AND RASTER PRIMITIVES

Electromagnetic spectrum

Image from wiki

Three-Color Theory

Human visual system has two types of sensors– Rods:

• monochromatic, night vision

– Cones:• Color sensitive• Three types of cone• Only three values • (the tristimulusvalues) are sent to the brain

Additive / Subtractive color

MY

C

Additive Color

LCD, projector

Subtractive Color

Printer

RGB color space

Red

Green

Blue

Black(0, 0,

0)

a 8 x 8 x 8-inch cube bookTauba Auerbach

HSV color space

HSV – hue, – Saturation, – Value,

HSV UI

Imaging and Raster Primitives

Describe OpenGL’s raster primitives: – bitmaps – image rectangles

Demonstrate how to get OpenGL to read and render pixel rectangles

9

Pixel-based primitives

Bitmaps– 2D array of bit masks for pixels

• update pixel color based on current color

Images– 2D array of pixel color information

• complete color information for each pixel

OpenGL does not understand image formats

10

FrameBuffer

Rasterization(includingPixel Zoom)

Per FragmentOperations

TextureMemory

Pixel-TransferOperations(and Pixel Map)

CPUPixelStorageModes

glReadPixels(), glCopyPixels()

glBitmap(), glDrawPixels()

glCopyTex*Image();

Pixel Pipeline

Programmable pixel storage and transfer operations

CPUCPU

DLDL

Poly.Poly. Per

Vertex

PerVertex

RasterRaster

FragFrag

FBFB

PixelPixel

TextureTexture

Positioning Image Primitives

glRasterPos3f( x, y, z ) Raster position transformed like

geometry discarded if raster position

is outside of viewport▪ may need to fine tune

viewport for desiredresults

12

Raster Position

glWindowPos2f(x, y)Specify the raster position in window coordinates for pixel operations

Rendering Bitmaps

glBitmap( width, height, xorig, yorig, xmove, ymove, bitmap )

render bitmap in current colorat

advance raster position by after rendering

14

ymovexmove

width

he

igh

t

xorig

yorig

xmove

Rendering Fonts using Bitmaps

OpenGL uses bitmaps for font rendering– each character is stored in a display list

containing a bitmap– window system specific routines to

access system fonts• glXUseXFont()• wglUseFontBitmaps()

15

Rendering Images

glDrawPixels( width, height, format, type, pixels )

render pixels with lower left of image at current raster position

numerous formats and data typesfor specifying storage in memory▪ best performance by using format and type

that matches hardware

16 width

height

Reading Pixels

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

read pixels from specified (x,y) position in framebuffer

pixels automatically converted from framebuffer format into requested format and type

Framebuffer pixel copyglCopyPixels( x, y, width, height, type )

17

OpenGL 1.X and 2.X

Frame BufferMemory

glDrawPixels()

glReadpixels()

glCopyPixels()

Modern OpenGL

Frame BuffersMemory

glDraw*() with texture

glReadpixels() glBlitFramebuffer()

Textures

glTexture*()

glGetTexImage()

Pixel Zoom

glPixelZoom( x, y )– expand, shrink or reflect pixels

around current raster position– fractional zoom supported

20

RasterPosition

glPixelZoom(1.0, -1.0);

Storage and Transfer Modes

Storage modes control accessing memory– byte alignment in host memory– extracting a subimage

Transfer modes allow modify pixel values– scale and bias pixel component values– replace colors using pixel maps

21

Pixel Packing

void glPixelstorei(GLenum pname, GLint param);

FrameBufferMemory

Pname Param

GL_UNPACK_ALIGNMENT 1, 2, 4, or 8

GL_PACK_ALIGNMENT 1, 2, 4, or 8

unpack

pack

ALPHA AND BLENDING

Alpha

An alpha channel, representing transparency information on a per-pixel basis. Alpha = 0.0f: fully transparent Alpha = 1.0f: fully opaque

Chroma-keying (Primatte)

Writing Model

• Use A component of RGBA (or RGBa) 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

glBlendFunc(Glenum S, Glenum D);

– Cf = (Cs*S) + (Cd*D)

glBlendFunc(GL_SRC_ALPHA,

GL_ONE_MINUS_SRC_ALPHA);Ex: Cs={Rs, Gs, Bs, As}, Cd ={Rd, Gd, Bd,

Ad}, Cf = (Cs*As) + (Cd*(1-As))

Compositing

F B

C

foreground color alpha matte background plate

composite

compositingequation

B

F

C

=0

Compositing

BFC )α1(α

F B

Ccomposite

compositingequation

B

F

C

=1

Order Dependency

• Is this image correct?– Probably not– Polygons are rendered

in the order they passdown the pipeline

•Blending functionsare order dependent

class RGBApixmap

RGBApixmap pic; pic.readBMPFile(“stand.bmp”);pic.setChromaKey(232, 248, 248);

// drawpic.blendtex(picX, picY, 1.0, 1.0);