3-graphics in game (game development - umt spring 2017)

GraphicsinGame

FROM:HAFIZAMMARSIDDIQUI– COURSE:GAMEDEVELOPMENT– INSTITUTE:UNIVERSITYOFMANAGEMENTANDTECHNOLOGY

ComputerGraphicsandRendering• Computer graphics is the generation and manipulation of images using a computer as a

rendering tool

• Graphics rendering is a process of generating a graphical output from images or models

by means of computer programs. It can contain geometry, camera viewpoint, texture

and lighting information.Twopopular graphics rendering techniques are

• Rasterization

• Ray Tracing


2DGraphics


2DGraphics• 2D graphics is the computer-based generation of 2D visuals from digital images, text or

2D geometricmodels

• There are two basic types of 2D graphics

• Raster Graphics (Digital Images)

• Vector Graphics (2D GeometricModels)


RasterGraphics(DigitalImages)• Raster graphics are digital images which contain picture elements called pixels, each of

which has a particular location and value

• Digital image represents rectangular grid of pixels

• Each pixel in digital image has a color


RasterGraphics(DigitalImages)• Sprite: A sprite is a 2D rectangular digital image that is drawn to the screen

• Static Sprite: Contains a single sprite image (no animation)

• Dynamic Sprite: Containsmultiple sprite images (image sequence creates animation)


VectorGraphics(2DGeometricModels)• Vector graphics are geometric models which are created through a sequence of

commands or mathematical statements, a 2D geometric model file describes a series of

points to be connected by edges or mathematical equations

• 2D geometricmodels contain points, lines, polygons and curves

• Each point in 2D geometricmodel has a definite position on X and Y axes


VectorGraphics(2DGeometricModels)• Point: Point or vertex is an exact position or location in space

• Line: Line or edge is a connection between two points in space


Pointat(1,1)

Linefrom(0,0) to(1,1)

VectorGraphics(2DGeometricModels)• Polygon: Polygon is closed shape formedwith straight lines


Polygonwithlines(0,0) to(1,0)(1,0) to(1,1)(1,1) to(0,1)(0,1) to(0,0)

VectorGraphics(2DGeometricModels)• Curve: Curve is set of points that satisfy one or more equations and form a

continuously bending line without angles


x2+y2 =r2 y=sin(x)

3DGraphics


3DGraphics• 3D graphics is the computer-basedgeneration of 3D visuals from3D geometric models

• 3D geometric models are created through a sequence of commands or mathematical

statements, a 3D geometric model file describes a series of points to be connected by

edges or mathematical equations

• 3D geometricmodels contain points, lines, faces and surfaces

• Each point in 3D geometricmodel has a definite position on X, Y and Z axes


3DGeometricModels• Point: Point or vertex is an exact position or location in space


Pointat(1,1,1)

3DGeometricModels• Line: Line or edge is a connection between two points in space


Linefrom(1,1,1) to(2,2,2)

3DGeometricModels• Face: Face is closed shape formedwith straight lines which is equivalent to polygon


Facewithlines(0,0,1) to(1,1,1), (1,1,1) to(2,0,2), (2,0,2) to(0,0,1)

3DGeometricModels•Mesh: Mesh is composed of points, lines and faces that defines a 3D shape


Meshofunitcube

3DGeometricModels•Meshes


3DGeometricModels• Surface: Surface is set of points that satisfy two or more equations and form a

continuous plane


x=rcos(∅), y=rsin(∅),z=r2 [r=1/3to1,∅=0to2 𝜋]

Transformations


CoordinateSpaces• A coordinate space represents an object’s relationship to the rest of the scene

• Local Coordinate Space: Coordinates of object are defined locally with respect to the

object itself (usingan origin pointwhich exists within the object)

• Global (World) Coordinate Space: Coordinates of object are global with respect to

the scene (using an origin pointwhich existswithin the scene)

• Object in a scene is represented by its position and orientation


AffineTransformations• Affine transformation is any transformation which preserves collinearity (points,

straight lines and planes) after transformation

• Basic affine transformationsare

• Translate

• Rotate

• Scale

• Shear


Translate• Translate changes position of 2D or 3D object in space in direction of at least one axis

by some units


Translatedinpositivex-axisdirectionby5units Translatedinnegativex-axisdirectionby5units

5 5

Rotate• Rotate a 2D object at particular angle from its origin and rotate a 3D object around at

least one axis at particular angle


Rotatedatangleof45degrees Rotatedatangleof45degreesaroundz-axis

Scale• Scale changes size of a 2D or 3D object in space along at least one axis by some factor


Scaledupalongx-axisby2factor Scaleddownalongy-axisby0.5factor

Shear• Shear slants shapeof a 2D or 3D object along particular axis by some factor


Shearedalongpositivex-axisby0.25factor Shearedalongnegativex-axisby0.25factor

CameraProjections


Projection• Projection is the display of 3D objects on a 2D plane also known as the view plane

(output display - viewport with camera perspective and viewpoint), defines how objects

will appear on the screen after mapping to 2D

• Projection is formedby intersection of projector lines with the viewing plane

• Two types of projections

• Parallel Projection

• Perspective Projection


ParallelProjection• Orthographic: Projector lines are parallel and perpendicular to the view plane

• Oblique: Projector lines are parallel but not perpendicular to the view plane


Viewplane

Viewplane

Frontview Topview Sideview Actualobject

PerspectiveProjection• 1 Point Perspective: Lines of any1 axis converge to its vanishingpoint in view plane


PerspectiveProjection


• 2PointPerspective:Linesofany2axesconvergetotheirvanishingpointsinviewplane

PerspectiveProjection


• 3 Point Perspective: Lines of all 3 axes converge to their vanishingpoints in view plane

ColoringandTextureMapping


Coloring


• Coloring is applying solid colors to a geometricmodel

• Every point (vertex) in a geometric model contains color information that is applied on

a polygon (face)which contains that point (vertex)

Polygonswithsinglecolor Polygonswithmultiplecolors

TexturingMapping


• Texture: Array of values (1D, 2D, 3D) containing color, alpha, depth and normal. Can be

loaded from images or generated procedurally bya program

• Texel: A single array element in a texture which is characterized by texture coordinates

ranges from0 to 1

• Texture Mapping: Process of applying texture to a geometric model. Point (vertex) in a

geometric model contain texture coordinate information that is mapped to a texture

TexturingMapping


0 10

1

u

v

2DTexturewithtexturecoordinates 3DGeometricmodel Texturemapped

TexturingMapping


Texturemapping ofacube(cubemapping)

OtherMaps&Mappings


• Height Map: Grayscale8-bit image which represents information in 1 dimension

• Bump Mapping: Create fake bumps on the surface of object by perturbing the

surfacenormalswhich are used in lighting calculations

• Displacement Mapping: Manipulate the position of points of a geometricmodel

• Normal Map: Color RGB 24-bit image which represents information in 3 dimensions

• Normal Mapping: Create fake depth illusions on the surface of object by changing

the surfacenormals in 3 dimensionswhich are used in lighting calculations

OtherMaps&Mappings


Heightmap

Normalmap

Displacementmapping

NormalmappingTexture

LightingandShading


Lighting


• Light is emitted by light sources

•When light interactswith object, it gets reflected (scattered) or absorbed by surface

• Lighting: The process of computing the light intensity reflected from a surface

Lightsource

Humaneye Object

Shading


• Process of assigning a color to a pixel (creates illusion of depth in object by varying the

amount of darkness by evaluating angles between light rays, surface normals and

camera)

• Twomost common types of shading

• Flat Shading: Pixels on the same polygon (surface) have samecolor

• Smooth Shading: Each pixel have its own (usually different) color

Shading


Flatshading Smoothshading

LightSources


• Ambient Light: It does not have a direction or position and its intensity is constant at all

points in a scene

• Point Light: Light rays are emitted from a point at some position in all possible

directions and their intensity decreaseswith squareof distance

Pointlight

LightSources


• Spot Light: Light rays are emitted from a point at some position that are directed with

cone projection and their intensity is highest at the center which decreases with square

of distance

Spotlight

LightSources


• Directional Light: Light rays are emitted in specified fixed direction (as if the point is

infinitely far away) and their intensity remains constant

• Area Light: Light rays are emitted from a 2D area in all directions uniformly across their

surfacearea and their intensity decreaseswith squareof distance

Directionallight

LightReflections


• Ambient Reflection: Reflect light fromother objects

• Diffuse Reflection: Reflect incoming light in all outgoing directions (assume equally)

which is independent from the viewing direction, for examplea rough surface

• Specular Reflection: Reflect incoming light in the direction of reflection which is

dependenton the viewing direction, for examplea shiny surfaceor mirror is ideal

Diffuse

SpecularIncoming

LightReflections


Ambient Diffuse Specular Combine

Reference• GameGraphicsProgramming- AllenSherrod

• 3DMathPrimerforGraphicsandGameDevelopment- FletcherDunn,IanParberry

• FundamentalsofComputerGraphics- PeterShirley,SteveMarschner

• PrinciplesofComputerGraphics– Shalini Govil


3-graphics in game (game development - umt spring 2017)

Education