software engineering - northeastern university engineering ! ... animation: illusion of life....

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

Computer Graphics

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

Creating Content In 3D?

3D Model Representation

ò  Polygons and vertices

ò  Use triangles as simple primitive

3D Coordinate System

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

Computer Graphics

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

ò  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 real-time, but there are optimization techniques

Graphics Pipeline Rendering Process

Model Transformation: Take model from local coordinates to world coordinates

Modeling Transformation

Illumination (Shading)

Viewing Transformation

Clipping

Projection to 2D space

Rasterization

Visibility/Display

Clipping

Rasterization

Visibility/Display

Illumination (Shading): Color per vertex or pixel is calculated based on light sources, and object materials

Clipping

Rasterization

Visibility/Display

Viewing Transformation: Color per vertex or pixel is calculated based on light sources, and object materials

Clipping

Rasterization

Visibility/Display

Clipping: Removing parts of the 3D scene that is not visible

Clipping

Rasterization

Visibility/Display

Projection to 2D space: Projecting the 3D object to 2D space

Clipping

Rasterization

Frame Buffer

Rasterization Convert objects to pixels, interpolate color and depth

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

From: MSDN: XNA Graphics Pipeline

Backface Culling Viewport clipping

3D Coordinate System

Or, if you are standing facing +ive X and your up is Y

Form: http://viz.aset.psu.edu/gho/sem_notes/3d_fundamentals/html/3d_coordinates.html

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

sx 00 sy

Transformation Matrix

sx 0 00 sy 0

0 0 sz

Vector Transformation: Rotation

ò  Around origin

clockwise cosθ −sinθsinθ cosθ

z− axiscosθ −sinθsinθ0

cosθ0

y− axiscosθ 00−sinθ

sinθ0cosθ

x − axis1 000

cosθsinθ

0−sinθcosθ

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:

1 0 xt0 1 yt0 0 1

x + xty+ yt1

Homogenous Coordinates

Affine Transformation

3D Translation of an object

•  Represent the point x, y by vector

•  Thus:

!x!y!z1

1 0 0 xt0 1 0 yt0 0 1 zt0 0 0 1

x + xty+ ytz+ zt1

Homogenous Coordinates

Affine Transformation

Vector Transformation: Translation

1 0 0 00 1 0 00 0 1 0. . . 1T x T y T z

⎡ ⎤⎢ ⎥⎢ ⎥⎢ ⎥⎢ ⎥⎣ ⎦

Rotations (Affine Transformation)

1 0 0 00 cos( ) sin( ) 00 sin( ) cos( ) 00 0 0 1

⎡ ⎤⎢ ⎥−⎢ ⎥⎢ ⎥⎢ ⎥⎣ ⎦

cos( ) 0 sin( ) 00 1 0 0sin( ) 0 cos( ) 00 0 0 1

⎡ ⎤⎢ ⎥⎢ ⎥−⎢ ⎥⎢ ⎥⎣ ⎦

cos( ) sin( ) 0 0sin( ) cos( ) 0 00 0 1 00 0 0 1

z zz z

−⎡ ⎤⎢ ⎥⎢ ⎥⎢ ⎥⎢ ⎥⎣ ⎦

Scaling (Affine Transformation)

ò  Scaling

0 0 00 0 00 0 00 0 0 1

scalescale

⎡ ⎤⎢ ⎥⎢ ⎥⎢ ⎥⎢ ⎥⎣ ⎦

When you are doing transformation on object, order is important

Vector Math: Dot Product

ò  Is a scalar

ò  Normalize vectors before use, formula is:

ò  Used to calculate angle between two vectors

float dotproduct = (v1.x*v2.x) + (v1.y*v2.y) + (v1.z*v2.z)

1cos a ba b

θ −⎛ ⎞⋅

= ⎜ ⎟⎝ ⎠

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:

ò  Used to calculate normal vector between two vectors

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

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

Vector Transformation: Scaling

ò Vector Transformation:

In 2D In 3D

sx 00 sy

sx 0 00 sy 0

0 0 sz

In XNA: Create a scale variable Vector3, then Matrix.CreateScale (scale)

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

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

Problem, don’t know which direction to rotate, need Cross Product

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

software engineering - northeastern university engineering ! ... animation: illusion of life....

Documents

xna winphone

xna l08–amazing xna utilities

xna intro workshop

xna ile oyun programlama

xna 4.0 game development by example visual basic … · xna...

xna and windows phone

ats – ss10 – florian oeser 09.06.20101. agenda was ist...

fun with xna o’reilly breakdown (learning xna 4.0 – ...

introduction to xna; game loops...introduction to xna; game...

making networked games with the xna framework · making...

5 digigirlz xna

xna l07–skybox and terrain

xna 3d primer

xna l10–shaders part 1

xna l05–texturing

xna -...

xna studio: introduction to xna brian keller product manager...

xna coding series

xna on windows phone 7

xna game studio 4.0 programming