CIS 350 – I Game Programming Instructor: Rolf Lakaemper

3D Basics

What ? In this lecture we will learn how to use 3D transformations to change the position of 3d vertices. This enables us to create animations and views of different perspective.

3D Basics Basic 3D Mathematics

3D Basics Everything we describe in our 3D worlds, e.g. vertices to describe objects, speed of objects, forces on objects, will be defined by 3D VECTORS i.e. triplets of 3 real values.

3D Basics 3D Euclidean Coordinate System (or 3D Cartesian Coordinate System) X y z V = (x, y, z)

3D Basics A vector v=(x,y,z) has the properties DIRECTION, the relative values of x,y,z to each other. Two vectors v,w have the same direction iff:  s  : v = sw MAGNITUDE (length) |v|. We’ll use the euclidean length: |v|=sqrt(x²+y²+z²)

3D Basics A vector v=(x,y,z) is normalized if |v| = 1 Normalizing a vector v is easy, just scale it by 1/length: V  v / |v| i.e. | v/|v| | = 1 Proof ?

3D Basics It’s usually handy to deal with normalized vectors. We’ll see.

3D Basics Basic Vector Operations Vector addition: v + w = (vx+wx, vy+wy, vz+wz) v wv+w

3D Basics Basic Vector Operations Scalar multiplication with s: s*v = v*s = (s*vx, s*vy, s*vz) v s*v Does not change direction Changes magnitude: |s*v| = s * |v|

3D Basics Dot Product v. w = vx*wx + vy*wy + vz*wz = |v| * |w| * cos (  (v,w)) v w w * cos (  (v,w))

3D Basics The dot product is a scalar value ! Having 2 vectors v,w it can be used to determine the angle between v and w:  (v,w) = acos (v.w / (|v| * |w|)) For normalized vectors:  (v,w) = acos (v.w)

3D Basics The dot product determines the INNER angle between v and w always 0 <=  (v,w) <= 180 v.w > 0 =>  (v,w) < 90° v.w  (v,w) > 90° in 2D direction of angle can be determined by sign(vx*wy – vy*wx)

3D Basics The Cross Product v x w = (vy*wz – vz*wy, no x comp. vx*wz – vz*wx, no y comp. vx*wy – vy*wx) no z comp. = |v| * |w| * sin(  (v,w)) * n with n being a normal vector: n orthogonal to v and w

3D Basics The result of the cross product is a vector ! (The result of the dot product is a scalar value) The cross product gives us the NORMAL vector to the plane defined by v and w. This is an extremely important tool in game programming (lighting, physical modelling,…)

3D Basics Basic 3D Transformations To move/animate objects or to change the camera’s position we have to transform the vertices defining our objects.

3D Basics The basic transformations are Scaling Translation Rotation

Scaling Component wise multiplication with scaling vector s = (sx,sy,sz): S(v,s) = (sx*vx, sy*vy, sz*vz) 3D Basics X y z v = (x, y, z) S(v,s) = (2x,1y, 3z), with s = (2,1,3)

Translation (Shift) Component wise addition with translation vector t = (tx, ty, tz) T(v,t) = (tx+vx, ty+vy, tz+vz) 3D Basics X y z v = (x, y, z) t v + t

Rotation To make it easier: 2D rotation first: Defined by center c and angle a: R(v,c,a) Rotation around center can be described by translation and rotation around origin: v  T(v,-c)  R(v,0,a)  T(v,c) We therefore only need to define the rotation around the origin, R(v,0,a) =: R(v,a) 3D Basics

Rotation around origin The counterclockwise (=positive angle) 2D rotation is described by : R(v,a) = (cos(a)*vx-sin(a)*vy, sin(a)*vx+cos(a)*vy) 3D Basics

Rotation around origin written as matrix: 3D Basics cos-sin sincos vx vy

3D Rotation Defined by angle, center and rotation axis. As in 2D case, the center can be translated to origin. The rotation around an arbitrary axis can be substituted by subsequent rotation around the main coordinate axes. 3D Basics

We therefore only need to define the rotation around the x, y and z axis. 3D Basics

Rotation around x axis: 3D Basics 100 0Cos-Sin 0SinCos X y z

Rotation around y axis: 3D Basics Cos0Sin 010 -Sin0Cos X y z

Rotation around z axis: 3D Basics Cos-sin0 SinCos0 001 X y z

The order of rotation is NOT exchangeable ! e.g. R(R(v,a1,X),a2,Y)  R(R(v,a2,Y),a1,X) 3D Basics

Combinations of transformations can be described by Matrix Multiplication 3D Basics

Remember ? 3D Basics a11a12 a21a22 b11b12 b21b22 * =

Remember ? 3D Basics a11a12 a21a22 b11b12 b21b22 * =

With Rx being a rotation matrix around the X axis, Ry being a rotation matrix around the Y axis, Ry * Rx * v is a rotation of v around X followed by a rotation around Y. Since Ry*Rx = Rc is a single 3x3 matrix, the 2 rotations can be written as Rc * c, i.e. a single rotation. 3D Basics

If we describe all transformations as matrices, the combination of subsequent transformations can be written as matrixmultiplication, and, if all parameters are known, as a SINGLE transformation matrix ! 3D Basics

Rotation was already defined as matrix. Here comes scaling: 3D Basics sx00 0sy0 00sz

What about translation ? Impossible as 3x3 matrix, since addition not multiplication is involved. Here comes a nice trick: increase the dimension ! 3D Basics

Homogeneous Coordinates (x,y,z)  (x,y,z,1) 3D Basics a11a12a13 a21a22a23 a31a32a33 a11a12a130 a21a22a230 a31a32a 

Now the translation by (tx,ty,tz) can be written as: 3D Basics 100tx 010ty 001tz 0001

Homogeneous coordinates allow us to describe ALL transformations mentioned as matrix multiplications. Sequences of transformations can hence be described by a SINGLE 4x4 matrix. 3D Basics

Example Transformations 3D Basics 100tx 010ty 001tz 0001 Sx000 0Sy00 00Sz cos0-sin sin0cos translationscalingRotation (y) cos0-sintx 010ty sin0costz 0001 Translation by t and Rotation (y) (which one’s first ?)

Projections Though we handle 3D worlds, they are displayed in 2D by our monitors. We have to project our 3D world into 2D. 3D Basics

Orthographic Projection (Parallel Projection) a system of drawing views of an object using perpendicular projectors from the object to a plane of projection… …or… 3D Basics

Display object by rotation followed by z coordinate removal Illustrations taken from 3D Basics

Parallel lines… 3D Basics

The six main projections 3D Basics

The six main projections 3D Basics

The six main projections 3D Basics

The projection matrix of the front view is very simple: 3D Basics

Perspective Projection Produces a view where the object’s size depends on the distance from the viewer An object farther away becomes smaller 3D Basics

Perspective Projection 3D Basics

Perspective Projection 3D Basics

More about the perspective projection and its usage later in connection with OpenGL 3D Basics

End of 3D math basics 3D Basics

Coordinate Transformations and OpenGL Matrices OpenGL Transformations

Rendering 3D scenes, vertices pass through different types of transformations before they are finally rendered on the screen: Viewing transformation: Specifies the location of the camera Modeling transformation: Moves objects around the scene Projection transformation: Defines the viewing volume and clipping planes Viewport transformation: maps the 2D projection of the scene into the rendering window

OpenGL Transformations To understand the actual rendering it is helpful to get a view on the vertex transformation pipeline

OpenGL Transformations OpenGL uses 2 different matrices to transform the 3D world into 2d coordinates: the ModelView Matrix and the Projection Matrix

OpenGL Transformations These matrices are nothing miraculous but simply 4x4 matrices (why 4x4 ?) applied to each and every vertex processed between glBegin and glEnd. They define the pose (position and heading) of the camera as well as the object (model) transformations as well as the view volume, i.e. the basic clipping planes and projection.

OpenGL Transformations Desired pose of camera and model transformations should/must be put into the modelview matrix. Clipping information must be put into the projection matrix. (After all, these are just matrices, and they can easily be demystified by using your own transformations)

OpenGL Transformations There is no special camera matrix in OpenGL. Camera (view) transformations belong into the ModelView matrix. Do NOT put them into the projection matrix, since the view information is needed for lighting & fog, taken from the modelView matrix BEFORE the projection matrix is utilized.

OpenGL Transformations For the basic understanding imagine the OpenGL world coordinate system as follows: X y z camera

OpenGL Transformations The camera is placed at (0,0,0) and looks along the negative z axis, y is up. X y z camera

OpenGL Transformations What happens to a vertex that is placed at (0.5, 0.5, -0.5) in the coordinate system ? X y z camera

OpenGL Transformations Answer: X y z camera Well, it is placed at (0.5, 0.5, -0.5) in the coordinate system. Really ?

OpenGL Transformations It is not. It undergoes all the transformations defined in the modelView and projection matrix first, then it is clipped, scaled to the viewport and finally brought up to your screen. To model that process it is the easiest to imagine two different views of the 3d world, the EYE coordinate system and the OBJECT coordinate system.

OpenGL Transformations To make it short: the modelview matrix defines the transformation of the object coordinate system (OCS) with respect to the eye coordinate system (ECS). What is that ?

OpenGL Transformations Again: the modelview matrix defines the transformation of the object coordinate system (OCS) with respect to the eye coordinate system (ECS). In the beginning, the modelMatrix is set to the identity (e.g. by glLoadIdentity()). So the OCS is identical to the ECS.

OpenGL Transformations Red: ECS Green: OCS ex ey ez ox oy oz

OpenGL Transformations The transformation functions change the modelView matrix, as long as glMatrixMode is set to GL_MODELVIEW. If glTranslatef() is used, the OCS is translated relatively to the ECS. ex ey ez

OpenGL Transformations The transformation affected the OCS, NOT an object itself ! If we draw an object, it is always done with respect to the OCS. Hence translating the OCS translates the object. But it’s the easiest to always think in terms of the OCS, not the object !

OpenGL Transformations An example: Draw a square, size 1x1, bottom left corner at the origin. The result looks like this, if the transformation matrices are set to default values.

OpenGL Transformations Now Scale the rectangle by factor ½. glMatrixMode(GL_MODELVIEW); glLoadIdentity(); glScalef(0.5,0.5,0.5); The result looks like this:

OpenGL Transformations If we think about the object itself, we’d say: ‘it’s a 0.5 x 0.5 rectangle’ …so translating it by (-0.5, -0.5, 0) would put the upper right corner into the image center. It doesn’t. It centered the square.

OpenGL Transformations The explanation is simple if we think in terms of the OBJECT COORDINATE SYSTEM: We didn’t scale the object, we scaled the OCS, i.e. the units on the OCS are now half the units of the ECS.

OpenGL Transformations The square is still a 1x1 square, but with respect to the OCS.

OpenGL Transformations The translation affects the OCS, with respect to its own units, NOT the ECS’s units ! glTranslate(-0.5,-0.5, 0) therefore centers the 1x1 square.

OpenGL Transformations If we would rotate the object now, we would in fact rotate the OCS. Around its origin, of course: glRotatef(-90,0.0,0.0,-1.0)

OpenGL Transformations …back to the non rotated version. What happens if we rotate the scene by the PROJECTION matrix instead ? Btw.: this is bad openGL style. Rotations etc. belong into the modelView matrix.

OpenGL Transformations It is rotated around the ECS origin. The PROJECTION matrix affects the ECS coordinate system. This is especially true for the frustum and ortho definitions defining the view volume.

OpenGL Transformations It is rotated around the ECS origin. The PROJECTION matrix affects the ECS coordinate system. This is especially true for the frustum and ortho parameters defining the view volume.

OpenGL Transformations So what happens to our vertex until it is put onto the screen ? first the OCS is modified by the modelView matrix. the vertex is put into the OCS the vertex is interpreted in the ECS and not displayed if outside of the view volume if inside the view volume, it is projected to the front face of the view volume, using the projection matrix cont’d

OpenGL Transformations the view model’s front face is translated to a 2D with x and y range -1,1. This can cause all kinds of distortions, if the front face is not a square.

OpenGL Transformations finally, the -1,1 square is put into the window on your screen, transformed to the rectangle defined by the viewPort. Once again distortions might occur. that’s it.