3D Game Programming2D primitive

3D Game Programming2D primitive

Ming-Te ChiDepartment of Computer Science, 

National Chengchi University

OutlineOutline

Imaging and Raster Primitives(4rd ch7)

Alpha and blending (4rd ch6) (5th ch3)

IMAGING AND RASTER PRIMITIVES

IMAGING AND RASTER PRIMITIVES

Electromagnetic spectrumElectromagnetic spectrum

Image from wiki

Three-Color TheoryThree-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 colorAdditive / Subtractive color

MY

C

Additive Color

LCD, projector

Subtractive Color

Printer

RGB color spaceRGB color space

Red

Green

Blue

Black(0, 0,

0)

rgb color cube in another view

HSV color spaceHSV color space

HSV – hue, – Saturation, – Value,

HSV UI

Imaging and Raster PrimitivesImaging 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 primitivesPixel-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 PipelinePixel Pipeline

Programmable pixel storage and transfer operations

CPUCPU

DLDL

Poly.Poly. Per

Vertex

PerVertex

RasterRaster

FragFrag

FBFB

PixelPixel

TextureTexture

Positioning Image PrimitivesPositioning Image Primitives

glRasterPos3f( glRasterPos3f( x, y, zx, 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(glWindowPos2f(x, yx, y))Specify the raster position in Specify the raster position in

window coordinates for pixel window coordinates for pixel operationsoperations

Rendering BitmapsRendering Bitmaps

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

render bitmap in current colorat

advance raster position by after rendering

14

y o r i gyx o r i gx

y m o v ex m o v e

width

he

igh

t

xorig

yorig

xmove

Rendering Fonts using BitmapsRendering 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 ImagesRendering Images

glDrawPixels( width, height, format, type, glDrawPixels( width, height, format, type, pixels )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 PixelsReading Pixels

glReadPixels( x, y, width, height, format, glReadPixels( x, y, width, height, format, type, pixels )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 )glCopyPixels( x, y, width, height, type )

17

Frame BufferMemory

glDrawPixels()

glReadpixels()

glCopyPixels()

Pixel ZoomPixel Zoom

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

around current raster position– fractional zoom supported

19

RasterPosition

glPixelZoom(1.0, -1.0);

Storage and Transfer ModesStorage 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

20

Pixel PackingPixel 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 BLENDINGALPHA AND BLENDING

AlphaAlpha

An alpha channel, representing transparency information on a per-pixel basis. Alpha =0: full transparent Alpha =1 :a fully opaque pixel.

Chroma-keying (Primatte)Chroma-keying (Primatte)

Writing ModelWriting Model

Use A component of RGBA (or RGB) color to store opacityDuring rendering we can expand our

writing model to use RGBA values

Color Buffer

destinationcomponent

blend

destination blending factor

source blending factor sourcecomponent

BlendingBlending

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))

CompositingCompositing

BFC )α(α 1

F B

C

foreground color alpha matte background plate

composite

compositingequation

B

F

C

=0

CompositingCompositing

BFC )α1(α

F B

Ccomposite

compositingequation

B

F

C

=1

Order DependencyOrder Dependency

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

in the order they passdown the pipeline

Blending functionsare order dependent

class RGBApixmapclass RGBApixmap

RGBApixmap pic; pic.readBMPFile(“stand.bmp”);pic.setChromaKey(232, 248, 248);//drawglPixelZoom(1.0, 1.0);glWindowPos2i(picX, picY);pic.blend();// alternative drawpic.blendtex(picX, picY, 1.0, 1.0);