Software Engineering. ò Look up Design Patterns. ò Code Refactoring. ò Code Documentation? ò One of the lessons to learn for good design:

Software Engineering ò Look up Design Patterns ò Code Refactoring ò Code Documentation? ò One of the lessons to learn for good design: ò Coupling: the amount of interconnectedness between classes ò Cohesion: a measure of how closely related the responsibilities, data, and methods for a class are ò For good code: Increase cohesion and decrease coupling

Architecture: Code Review Session Pair Review Guidelines

3D Graphics Resources: outside Materials Recommended Readings: Chapters 5 (Tom Miller) Chapter 11 (Aaron Reed)

Computer Graphics ò Modeling: math representation of a set of objects in a scene ò Rendering: drawing the images from model description to pixels on the display: combining lighting, objects, materials ò Animation: illusion of life

Some terms ò Pixel: short for Picture Element ò Raster image: image stored as an array of pixels usually with RGB values ò Raster Display: displays that show images as rectangular array of pixels

Creating content In 2D?

Pixel Art ò Form of art whereby artists draw images by pixel using raster image software, e.g. paint or photoshop ò Advantages: ò File types can be read by any program ò Easy for photo touch ups ò Disadvantages: ò Cannot change the image too much ò Resizing problems

Vector Art ò Images represented as vectors (mathematically), lines, points, and curves ò Advantages: ò Easy to change and manipulate objects ò Can convert to pixel or raster art ò Can resize ò Disadvantage: ò Cannot use it for photos ò Not so good with a lot of color blends

2D Coordinate system 0,0 x y

Creating Content In 3D?

3D Model Representation ò Polygons and vertices ò Use triangles as simple primitive

3D Coordinate System Form: http://viz.aset.psu.edu/gho/sem_notes/3d_fundamentals/html/3d_coordinates.html Or, if you are standing facing +ive X and your up is Y

Displays ò Example raster display ò Frame Buffer which holds color value per pixel RGB and an alpha channel for translucency

Displays (LCD and LED) ò Both displays are based on independent 3 sub-pixels per pixel, showing RGB

Color ò Subtractive: subtracting color ò Paints ò Additive: is adding color ò Lights ò Displays ò CG

Color (Representation) ò 8-bit RGB fixed range: web, email apps ò 12-/14-bit RGB fixed range: photography ò 16-bit RGB fixed range: printing and image processing and photography ò 16-bit float RGB: HDR High Dynamic Range (real-time rendering) ò 32-bit float RGB: HDR

Projective Rendering ò Used by OpenGL & DirectX ò Efficient for real-time rendering ò For each object in the scene ò Polyons are projected to 2D screen ò Order/depth is conserved ò Color is computed based on materials and light

Ray Tracing ò Shoot a ray from the eye to the scene ò Draw pixel based on color reflections from light sources and objects materials, etc. ò It is slow not usually realtime, but there are optimization techniques

Graphics Pipeline Rendering Process

Modeling Transformation Illumination (Shading) Model Transformation: Take model from local coordinates to world coordinates Viewing Transformation Clipping Projection to 2D space Rasterization Visibility/Display

Modeling Transformation Illumination (Shading) Illumination (Shading): Color per vertex or pixel is calculated based on light sources, and object materials Viewing Transformation Clipping Projection to 2D space Rasterization Visibility/Display

Modeling Transformation Illumination (Shading) Viewing Transformation: Color per vertex or pixel is calculated based on light sources, and object materials Viewing Transformation Clipping Projection to 2D space Rasterization Visibility/Display

Modeling Transformation Illumination (Shading) Clipping: Removing parts of the 3D scene that is not visible Viewing Transformation Clipping Projection to 2D space Rasterization Visibility/Display

Modeling Transformation Illumination (Shading) Projection to 2D space: Projecting the 3D object to 2D space Viewing Transformation Clipping Projection to 2D space Rasterization Visibility/Display

Modeling Transformation Illumination (Shading) Rasterization Convert objects to pixels, interpolate color and depth Viewing Transformation Clipping Projection to 2D space Rasterization Frame Buffer

Rasterization ò Rasterization is the process by which 2D or 3D objects are converted into pixels ò Each pixel is represented in RBG, depth

Graphics Pipeline

Graphics Pipelines From: Nvidia Cg Users Manual via http://blogs.vislab.usyd.edu.au/index.php/2007/03/

Graphics Pipelines XNA Backface Culling Viewport clipping From: MSDN: XNA Graphics Pipeline

3D Coordinate System Form: http://viz.aset.psu.edu/gho/sem_notes/3d_fundamentals/html/3d_coordinates.html Or, if you are standing facing +ive X and your up is Y It is important to know what coordinate system your artists used, otherwise the model will be flipped. To flip it back, multiply z coordinate by -1.

3D Graphics Drawing a model in XNA Chapters 5 (Tom Miller)

Get a Model ò Turbo Squid ò Or look for a model ò Remember to credit the person when using it

Representation of a Model ò Model ò ModelMesh (e.g., head, body, hand, etc.) ò ModelMeshPart: smallest part sent to video card (e.g., triangle strips) ò Effect: describes how the object should be rendered (world, view, projection to describe how the object is positioned, lighting, etc.)

Effect Classes in XNA ò BasicEffect (includes basic lighting: BasicEffect.EnableDefaultLighting()) ò Effect (use if you want to create your own shaders)

Adding a model in XNA

Matrix in XNA ò World Matrix: where the model is in relation to the world ò WorldMatrix = mesh * scale * rotate * translation matrix; ò View Matrix: where the camera sits ò CreateLookAt (camerapos, cameratarget, cameraupvector); ò Projection: how 3D space is projected into 2D screen ò CreatePrespectiveFieldOfView (fieldofview, aspectratio, nearplane, farplane) ò FieldOfView most often = MathHelper.PiOver4

Class Exercise Get a Model and add it in a 3D Scene in XNA

Moving the Model around Vector Math

Outline ò Scaling (generalized from 2D) ò Rotation (rotation about a line and not points) ò Translation

Vector Transformation: Scaling ò Vector Transformation: In 2D In 3D! # # " s x 0 0 s y $! & &# %" x y Transformation Matrix $ & %! # # # " s x 0 0 0 s y 0 0 0 s z $! &# &# %" x y z $ & & & % Transformation Matrix

Vector Transformation: Rotation ò Around origin In 2D " clockwise$ # cosθ sinθ sinθ cosθ %" ' $ &# x y % ' & In 3D Transformation Matrix " $ z axis$ $ # " $ x axis$ $ # cosθ sinθ 0 sinθ cosθ 0 1 0 0 cosθ 0 sinθ 0 0 1 0 sinθ cosθ %" ' $ ' $ ' $ &# %" ' $ ' $ ' $ &# x y z x y z % ' ' ' & % ' ' ' & " $ y axis$ $ # cosθ 0 0 1 sinθ 0 sinθ 0 cosθ %" ' $ ' $ ' $ &# x y z % ' ' ' &

Rotations ò Orientation: yaw, pitch and roll ò Yaw: around the Y ò Pitch: around the Z ò Roll: around X

2D Translation of an object Represent the point x, y by vector Thus: x y 1! " # # # $ % & & & x! y! 1 " # $ $ $ % & ' ' ' = 1 0 x t 0 1 y t 0 0 1 ( ) * * * * +, - - - - x y 1 ( ) * * * +, - - - = x + x t y + y t 1 ( ) * * * * +, - - - - Homogenous Coordinates Affine Transformation

3D Translation of an object Represent the point x, y by vector Thus: x y z 1! " # # # # $ % & & & & x! y! z! 1 " # $ $ $ $ % & ' ' ' ' = 1 0 0 x t 0 1 0 y t 0 0 1 z t 0 0 0 1 ( ) * * * * * +, - - - - - x y z 1 ( ) * * * * +, - - - - = x + x t y + y t z + z t 1 ( ) * * * * * +, - - - - - Homogenous Coordinates Affine Transformation

Vector Transformation: Translation 1 0 0 0 0 1 0 0 0 0 1 0 Tx. Ty. Tz. 1

Rotations (Affine Transformation) 1 0 0 0 0 cos( ) sin( ) 0 0 sin( ) cos( ) 0 0 0 0 1 x x X x x cos( ) 0 sin( ) 0 0 1 0 0 sin( ) 0 cos( ) 0 0 0 0 1 y y Y y y cos( ) sin( ) 0 0 sin( ) cos( ) 0 0 0 0 1 0 0 0 0 1 z z z z Z

Scaling (Affine Transformation) ò Scaling scale 0 0 0 0 scale 0 0 0 0 scale 0 0 0 0 1 When you are doing transformation on object, order is important

Vector Math: Dot Product ò Is a scalar ò Normalize vectors before use, formula is: float dotproduct = (v1.x*v2.x) + (v1.y*v2.y) + (v1.z*v2.z) ò Used to calculate angle between two vectors ab θ cos 1 = ab

Vector Math ò Dot product: ò Same vector? ò Opposite vector? ò Orthogonal vector? ò Why is the Dot product important?

Vector Math: Cross Product ò Is a vector ò Normalize vectors before use, formula is: Vector3 crossproduct; crossproduct.x = (v1.y*v2.z) (v2.y*v1.z); crossproduct.y = (v1.z*v2.x) (v2.z*v1.x); crossproduct.z = (v1.x*v2.y) (v2.x*v1.y); ò Used to calculate normal vector between two vectors

Vector Math ò Unit vector: ò vector of length of 1.0 ò To unitize or normalize your vector: Vector3 destination = new Vector3(10, 15, 10); Vector3 origin = new Vector3(2, 15, 0); Vector3 direction = destination - origin; direction.normalize();

E.g., Rotate towards object Vector3 destination = new Vector3(10, 15, 10); Vector3 origin = new Vector3(2, 15, 0); Vector3 direction = destination - origin; Vector3 facingdirection = new Vector (0, 0, 10); direction.normalize(); facingdirection.normalize(); //getting the rotation angle float rotationangle; rotationangle = Math.Acos(Vector3.Dot(direction, facingdirection));

Matrix Class in XNA ò Matrix.CreateTranstlation(translationVector3); ò Matrix.CreateRotationX(angle); ò Matrix.CreateRotationY(angle); ò Matrix.CreateRotationZ(angle); ò Matrix.CreateScale(scale);

Matrix Class in XNA ò worldmatrix = scale * rotate * translate;

Class Assignment Try moving the model forward and backward

Assignment # 2 Online