Computer Graphics for Games

1
Computer Graphics for Games

• 3D graphics fundamentals

2
(No Transcript)
3
(No Transcript)
4
(No Transcript)
5
(No Transcript)
6
(No Transcript)
7
3D Graphics Boot Camp(objectives)

• Learn the fundamentals of real-time 3d rendering
• Implement a functional software rendering
  library.
• Have fun doing it!
• Dont cry!

8
Direct3D Rendering Pipeline

• Vertex Data Model data
• Primitive Data Triangles,polys,lines
• Tessellation Convert special surfaces to
  polys/tris
• Vertex Processing 3d transformations
• Geometry Processing Clipping.culling,
  rasterization
• Textured Surface Map textures to geometry
• Texture Sampler Filter textures apply level of
  detail
• Pixel Processing Pixel shader operations
  (lighting)
• Pixel Rendering Final processing, alpha,
  depth/stencil testing,blending/fog,

9
Final Product
10
Our Rendering Pipeline

• Vertex Data Simple Model File (Cube and Bunny)
• Vertex Processing Camera projection, perspective
  projection, window projection.
• Lighting Diffuse and Phong shading
• Rasterization Lines and triangles
• Pixel Rendering Z-buffer depth test

11
Final Product
12
But First A Cube(Lab part 1)

• Define points in 3d
• Move/Rotate points in 3d
• Turn them into 2d points (with perspective)
• Rasterize 2d lines
• Color

13
The Raster(aka. Frame buffer)

• A raster image is a matrix of row and column
  data points whose values represent energy being
  reflected or emitted from the object being
  viewed. These values, or pixels, can be viewed on
  a display monitor as a black and white or color
  image.
• (edc.usgs.gov/glis/hyper/glossary/p_r)

14
Pixels

• Each display element on a raster is called a
  pixel.
• We will need real screen coordinates to specify
  pixel coordinates.
• We imagine our indexing system is referencing the
  center of each pixel on the screen.

15
Color Representations

• Subtractive Colors
• Each pigment absorbs different frequencies.
• The remaining light reflected is the observed
  pigment color.
• Mixing leads to black.
• CMYK
• Used for printing
• Additive Colors
• Light is emitted at various frequencies.
• Mixing leads to white
• RGB
• Used for computer graphics

16
Color Coordinates

• Color can be represented as a 3d vector in RGB
  colospace.
• Each entry represents the amount of each primary
  color component (r,g,b) used to mix the final
  color.
• (0,0,0)black
• (1,1,1)white
• (1,0,0)red
• (0.196,0.156,0.235)puce

17
Color Depth

• Color depth is the number of distinct colors
  represented by a pixel.
• We will use 24 bit color which represents about
  16.7 million colors.
• Each color channel is represented with 8 bits for
  a total of 256 possible values.
• We will represent a color as an unsigned long

18
Color Macros

• //Packs color components into an unsigned long
• //0xRRGGBB
• define RGB(r, g,b) \
• ((unsigned long) (((unsigned char) (b)\
• ((unsigned short) (g) ltlt 8)) (((unsigned long)\
• (unsigned char) (r)) ltlt 16)))
• //Unpack an rgbs color components
• define B(rgb)((unsigned char)(rgb))
• define G(rgb)\
• ((unsigned char)(((unsigned short)(rgb)) gtgt 8))
• define R(rgb)((unsigned char)((rgb)gtgt16))

19
A Quick Word About Alpha

• Represents the opaqueness of an RGB value.
• Used to mix the colors from overlapping surfaces
  to simulate translucency.
• Different types of blending (Addition/multiplicati
  on) produces various interesting effects.

20
Beware MATH!!
21
Transform (3D to 2D)

• Objective To turn 3D coordinates into 2D
  coordinates.
• From Linear algebra
• A Transform (aka. function or mapping) T from Rn
  to Rm is a rule that assigns te each vector x in
  Rn a vector T(x) in Rm.
• Sort of, but this could be any function. We need
  a transform with some specific properties.

22
Linear Transform

• Most importantly we want to preserve the edges of
  things.
• In a Linear Transformation Lines go to lines.
• A transformation T is linear if
• T(u v) T(u) T(v) for all u,v in the domain
  of T.
• T(cu)cT(u) for all u and all scalars c.
• Note Angles and line lengths are not necessarily
  preserved.

23
Linear Transformations
Scale
Shear
Rotate
Reflect
24
Affine Transformation

• An affine transform is basically a linear
  transformation followed by a translation.
• T(x)Axb

25
Homogeneous Coordinates

• We will represent our coordinates as homogeneous
  coordinates.
• This is a 3d coordinate with a homogeneous scale
  factor.
• The scale factor is used to help us reason about
  a point at infinity. This will be of use when we
  think about perspective (soon).
• For now, assume the homogonous scale factor is
  always 1.

26
Affine Transforms Using Matrices

• We can transform a homogenous vector v by affine
  transform A using post-multiplication
• The upper left 3x3 matrix represents the Linear
  transform and the last column is the translation.
• The last row is necessary for the transform to
  work correctly in the context of matrix
  multiplication.
• Also it will have an effect on the homogenous
  factor when it comes to perspective projection.

27
Combining Transformations

• Finally, you can use matrix multiplication to
  form composite transformations.
• Remember order matters!

28
Rotation Matrices
Rotation around X
Rotation around Y
Rotation around Z
29
Other Important Transformations
Scale Matrix
Translation Matrix
30
Yucky Math Done (sort of)
31
3D Coordinate System

• We will use a Left handed coordinate system.
• This means the negative Z axis will be pointing
  out of the screen.
• This is by convention, a right handed system is
  equivalent.
• MAKE SURE YOU KNOW WHICH ONE YOURE USING!!

32
Canonical View Volume

• All visible coordinates must exist within the
  canonical view volume.
• We specify the volume with six planes.
• They are near, far,left,right, top and bottom.
• Typically the view volume is represented by
• (x,y,z)?-1,13

33
Parallel Projection

• The first step is simply being able to flatten
  points within the canonical view volume onto the
  screen.
• This is done using a parallel projection in which
  we transform x and y coordinates to screen
  coordinates and ignore the z coordinate entirely.
  
• This transformation is sometimes called the
  windowing transform.

34
Parallel Projection Matrix
nxScreen width
ny Screen height
35
Parallel Projection of a Cube
36
Arbitrary View Positions

• Now wed like to be able to view our 3d scene
  from different positions.
• We need the following
• The eye position e
• The gaze direction g
• The view-up vector t

37
The View Matrix

• We can use the t and g vectors to create an
  orthographic coordinate system u,v,w.
• The idea is to move e to the origin and then
  align u,v,w with the regular coordinate axis.
• This will have the effect of displaying objects
  in the view volume from the specified point of
  view.

38
Arbitrary View point!
39
Perspective Projection

• To simulate perspective, parallel lines should
  converge at a vanishing point on a distant
  horizon.
• In such a projection points are scaled in
  proportion to their distance from the screen.

40
Perspective Matrix

• Where
• nnear plane
• ffar plane
• rright plane
• lleft plane
• ttop plane
• bbottom plane

41
Homogeneous Divide

• However, this only gets us part way there. We
  need to scale the point in proportion to the
  depth from the screen.
• The final step is to divide the resulting vertex
  by the homogeneous coordinate.
• This leaves us with our perspective projected
  point.

42
Perspective 3D!
43
Simple 3d Pipeline for Lines
DrawLine3d(v4 a, v4 b, rgb c) v4 p, q Mx4
M Compute Mparallel Compute Mview Compute
Mperspective Compute Mtransform M
MperspectiveMviewMtransform p Ma q Mb
//Homogonize before transform to
screen px/ph,py/ph,qx/h,qy/h p
Mparallelp q Mparallelq drawline2d(px,py,qx,qy
,c)