1. Game Programming Algorithms and Techniques
Chapter 4
3D Graphics

2. Chapter 4 Objectives Coordinate Spaces
Learn the four main coordinate spaces
Using matrices to transform into these coordinate spaces
Learn the difference between orthographic and perspective
Lighting and Shading
Adding color and other vertex attributes
Four major types of lights used in games
Implementing the Phong reflection model
Differences between Gouraud and Phong shading
Visibility Algorithms
Learn why we use z-buffering for 3D scenes
Quaternions
Why they are better to use than Euler angles

3. Basic 3D Terminology
Software rasterization – Set of algorithms necessary to draw 3D objects into a 2D color buffer
Modern computers have a graphics processing unit (GPU) that can do most rasterization:
We just have to tell the GPU what we want to draw and where.
Graphical artifact – Unintended result of using an approximate algorithm.

4. A sample mesh made with triangles
Polygons
Most games use triangles.
Each point on the corner of a polygon is a vertex.
A sample mesh made with triangles

5. Coordinate Spaces
Coordinate spaces provide a frame of reference to the scene.
Just like the Cartesian coordinate space has a specific origin, each coordinate space has its own origin.
Most important coordinate spaces are:
Model
World
View/camera
Projection

6. Model Space
Coordinate space where the vertices are expressed relative to the model's origin:
In Maya, there is an origin that the model is drawn around, which is model space.
But the same can be said for a procedurally generated asset.

7. Model Space, Cont'd
Object in model space

8. World Space Coordinate space relative to the entire world.
Objects that were in model space are transformed to a specific position and orientation in the world.
To transform into world space, we need matrices.

9. World Space, Cont'd
Several instances of the object positioned/oriented relative to world space

10. Homogenous Coordinates
Adding a fourth component to a 3D vector so it can be transformed by 4x4 matrices.
This fourth component is the w-component.
w is usually either 0 or 1:
If w = 1, 3D vector is a position.
If w = 0, 3D vector is a vector.

11. Transform Matrices Allow us to modify vectors in certain ways.
These matrices are used to transform vertices from model space to world space.
Common operations:
Scale
Rotate
Translate

12. Scale Matrix Changes the scale along the three coordinate axes:
If sx = sy = sz, it's a uniform scale.

13. Translation Matrix Moves a point by a set amount.
Does not work if w = 0 because vectors have no position.

14. Rotation Matrices
Different rotations, once for each coordinate axis:

15. Order of Transforms The order really matters.
Generally, when using row-major vectors, you want:

16. Order of Transforms, Cont'd
If we translate and then rotate, we will orbit around the origin:
An object translated and then rotated about the world’s origin instead of about its own origin

17. View/Camera Space Coordinate space relative to the camera Camera space
© York/fotolia

18. View/Camera Space, Cont'd
One way to construct the camera matrix is a look-at matrix:
L = Left
U = Up
F = Front
T = Translation

19. CreateLookAt
function CreateLookAt(Vector3 eye, Vector3 target, Vector3 Up) Vector3 F = Normalize(target – eye) Vector3 L = Normalize(CrossProduct(Up, F)) Vector3 U = CrossProduct(F, L) Vector3 T T.x = -DotProduct(L, eye) T.y = -DotProduct(U, eye) T.z = -DotProduct(F, eye) // Create and return look-at matrix from F, L, U, and T ... end

20. Projection Space
Coordinate space where a 3D scene is flattened into a 2D one.
Two main ways projection can be set up:
Orthographic:
No depth perception. (Objects further away from the camera are the same size.)
Perspective:
True 3D depth perception.

21. Orthographic Projection
Top-down view of an orthographic projection (a), and the resulting 2D image
onscreen (b)
= Top-down view of projection
= Resulting 2D image on screen

22. Perspective Projection
Top-down view of a perspective projection (a), and the resulting 2D image onscreen (b)
= Top-down view of projection
= Resulting 2D image on screen

23. Orthographic Projection Matrix
width = Width of view
height = Height of view
near = Distance from camera to near plane
far = Distance from camera to far plane

24. Perspective Projection Matrix
fov = Field of view angle

25. RGBA Color Space
Separate channels for red, green, blue, and alpha (or transparency).
Common implementation is 1 byte per channel, or 4 bytes per pixel.
Often expressed as values from 0.0f to 1.0f.

26. RGBA Color Space, Cont'd
Opaque red and purple in the RGBA color space (a).
A transparent blue allows other
colors to be visible underneath (b).

27. Vertex Attributes Information that is stored for every vertex
Common attributes:
Color
Texture coordinates
Vertex normal

28. Texture mapping with UV coordinates
Uses (u,v) coordinates to represent position of texture
Texture mapping with UV coordinates

29. Averaged vertex normals
Can be average of the normal of all adjacent polygons
Averaged vertex normals

30. Vertex Normals, Cont'd
Can be different depending on which polygon the vertex is a part of
Vertex A on the cube uses one of three different normals, depending on the face.

31. Clockwise winding order (a), and counterclockwise winding order (b)
Determines which way the normal faces
= Clockwise
= Counter-clockwise
Clockwise winding order (a), and counterclockwise winding order (b)

32. Winding Order, Cont'd
Drawing with the wrong winding order can cause polygons to disappear!
A cube rendered with the correct winding order (a), and the same cube rendered with the incorrect winding order (b)

33. Lights Add visual interest to the scene.
Some lights affect the scene as a whole:
Ambient
Directional
Some lights affect only parts of the scene:
Point light
Spot light

34. Example in nature of ambient light
Uniform amount of light applied evenly to every side of every object in the scene
Example in nature of ambient light

35. Example in nature of directional light
No position, but emitted from a specific direction
Effects every object in the scene, but only illuminates one side of each object
Example in nature of directional light

36. A light bulb in a dark room is an example of a point light.
Set at a specific point and emanates in all directions.
Often the intensity of the light has a fall-off as you get further from it.
A light bulb in a dark room is an example of a point light.

37. A spotlight on stage is an
Like a point light, but has a limited angle of effect
A spotlight on stage is an
example of a spot light.

38. Phong Reflection Model
One type of BRDF that represents how light bounces off of a surface.
Phong reflection is a local lighting model, which means each object is lit as if it were the only object in the scene.
Three components:
Ambient
Diffuse
Specular

39. Phong Reflection Model, Cont'd
Ambient
Overall illumination of the scene
Independent of the location of lights and the camera
Diffuse
Primary reflection of light off surface, depends on:
Normal of surface
Location of lights
Specular
Shiny highlights
Depends on everything diffuse does, plus the location of the camera

40. Phong Reflection Model, Cont'd

41. Phong Reflection Model Pseudocode
// Vector3 N = normal of surface // Vector3 eye = position of camera // Vector3 pos = position on surface // float a = specular power (shininess) Vector3 V = Normalize(eye – pos) // FROM surface TO camera Vector3 Phong = AmbientColor foreach Light light in scene if light affects surface Vector3 L = Normalize(light.pos – pos) Phong += DiffuseColor * DotProduct(N, L) Vector3 R = Normalize(Reflect(-L, N)) // Reflect –L about N Phong += SpecularColor * pow(DotProduct(R, V), a) end

42. Shading Determines: Where we compute the BRDF
How we fill in the rest of the polygons
Two important shading techniques:
Gouraud
Phong (not the same thing as Phong reflection model!)

43. Object drawn with Gouraud shading
Compute BRDF at each vertex
Interpolate colors between the vertices
Object drawn with Gouraud shading

44. Object drawn with Phong shading
Interpolate vertex normals between vertices
Compute BRDF at every pixel
Object drawn with Phong shading

45. Painter's Algorithm Redux
Painter's algorithm doesn't work well for 3D scenes.
We would have to sort every triangle back to front.
Worse, the camera is dynamic, so we'd have to re-sort!
The painter's algorithm has a lot of overdraw— redrawing the same pixel multiple times per frame.

46. Painter's Algorithm Failure
In 3D, there is a possibility that no one triangle is the furthest back.
Overlapping triangles failure case

47. Z-Buffering Create a new screen-sized buffer called the z-buffer.
It stores the depth of every pixel that is drawn.
As we draw pixels in the scene, only draw it if the depth stored in the z-buffer is greater than the depth of the current pixel.

48. A sample scene and its corresponding z-buffer
Z-Buffering, Cont'd
A sample scene and its corresponding z-buffer

49. Z-Buffering Pseudocode
// zBuffer[x][y] grabs depth at that pixel foreach Object o in scene foreach Pixel p in o float depth = calculate depth at p if zBuffer[p.x][p.y] > depth draw p zBuffer[p.x][p.y] = depth end

50. Euler Angle Problems Difficult to do arbitrary rotations:
We can't just point in a direction; we have to figure out the correct rotation about coordinate axes.
We can't rotate about an arbitrary axis.
Difficult to interpolate between orientations.
Euler angles can have gimbal lock.

51. A 90° rotation about the z-axis causes gimbal lock.

52. Quaternions
Can be used for lots of things, but for 3D graphics they are used to represent arbitrary rotations.
We use unit quaternions (length of 1).
Have a vector and scalar component.
Given an arbitrary axis and an angle of rotation, we can construct a quaternion:

53. Quaternion Advantages
Can perform an arbitrary rotation
Only use four floating point values (as opposed to 16 with a matrix)
Smoothly interpolate

54. Other Quaternion Properties
To rotate by quaternion q and then quaternion p, multiply p * q, using the Grassman product:
To invert a unit quaternion, negate the vector component.
Identity quaternion:

55. Final 3D Game Object Representation
class 3DGameObject Quaternion rotation Vector3 position float scale function GetWorldTransform() // Order matters! Scale, rotate, translate. Matrix temp = CreateScale(scale) * CreateFromQuaternion(rotation) * CreateTranslation(position) return temp end