Programming 3D Applications CE00056-1

1. Faculty of Computing, Engineering and Technology Staffordshire University Programming 3D Applications CE00056-1 Representation Of Virtual Objects Week 4 Lecture 7 Bob Hobbs

2. 2D v 3D • Computer screen 2D • Virtual environment 3D • Map 3D to 2D • Movement of objects is in 3 dimensional space • High processing power

3. What Makes a Picture 3-D? • Requires many more lines and angles to produce 3D • Must be able to define the lines and calculate which are visible as viewpoint changes to show motion • Colour, size and clarity of image indicate where shape is in relation to viewer

4. Steps to create a 3D scene • Creating a virtual 3-D world by defining a heirarchy of objects • Determining what part of the world will be shown on the screen. • Determining how every pixel on the screen will look so that the whole image appears as realistic as possible.

5. View the scene from one point

6. Another view

7. Inducing reality • Define the shapes so that they can be seen in motion 3D • Apply a surface texture • Show perspective • Lighting • Blurring the edges

8. A simple shape Defined as a set of points or Vertices With surfaces or facets defined by spline boundaries created by joining points with lines

9. More complex shapes • Shape defined as polygons(triangles) • Rounded surfaces created by more polygons

10. Defining the surface • Colour • variation over surface • Texture • rough, smooth, etc • Lighting • creates shadowing • Reflectance • dependant on texture and colour

11. Realism added by surface mapping

12. Lighting and reflectance • Exhibits shadowing and shading • Gouraud shading • Ray-tracing used to calculate light paths based on reflectance values

13. Perspective and Z-buffering • Objects appear smaller further away • Zero-point • Uses Z co-ordinate to compute • Relative position • Occlusion

14. Depth of field • Further away objects become hazier • Focus attention on nearer objects • Occurs naturally but must be added to virtual environment

15. Anti-aliasing • Sharp contrast ‘unreal’ • Curved lines - stepped • Edges blurred removing stepping • More ‘natural’

16. Basic Analysis 1Define points in 3D space 2 Define lines and Facets which join points together 3 Apply texture to facets 4 Define reflectance properties and colour of surface 5 Define light sources to generate shadows and shading 6 Redraw image as viewpoint changes applying perspective and occlusionto induce ‘Reality’

17. Definition of a vertex in 2D Distance Between Two Points The distance between two points <Ax,Ay> and <Bx,By > can be found using the pythagorus theorem: dx = Ax-Bx dy = Ay-By distance = sqrt(dx*dx + dy*dy)

18. A vector • Vectors themselves can be added by adding each of their components • or they can be multiplied (scaled) by multiplying each component by some constant k (where k <> 0).

19. Vectors can be added multiplied scaled To calculate the length of a vector we simply calculate the distance between the origin and the point at <x,y> : length = | <x,y> - <0,0> | = sqrt( (x-0)*(x-0) + (y-0)*(y-0) ) = sqrt(x*x + y*y) 2D Vectors

20. Definition of a 2D Line First we can imagine a line as having 2 endpoints in 2D space: P1=<x1,y1> and P2=<x2,y2>. Alternatively we can imagine the line as having an origin (starting point) and a direction (vector): Origin = <Xo, Yo > Direction = <Xd, Yd > we can assume that the line's origin is at one endpoint and it's direction is the difference between both endpoints: Origin = P1 = <x1, y1 > Direction = P2-P1 = <x2-x1, y2-y1> <x,y> = <xo, yo> + k * <xd, yd>

21. Definition of a 3D Point • A point is similar to it's 2D counterpart, we simply add an extra component, Z, for the 3rd axis: • Points are now represented with 3 numbers: <x,y,z>. • Left-hand rule

22. Distance Between Two 3D Points The distance between two points <Ax,Ay,Az> and <Bx,By,Bz> can be found by again using the pythagorus theorem: dx = Ax-Bx dy = Ay-By dz = Az-Bz distance = sqrt(dx*dx + dy*dy + dz*dz)

23. Definition of a 3D Vector Either a point at <x,y,z> or a line going from the origin <0,0,0> to the point <x,y,z>. 3D Vector addition and subtraction is virtually identical to the 2D case. You can add a 3D vector <vx,vy,vz> to a 3D point <x,y,z> to get the new point <x',y',z'> like so: x' = x + vx y' = y + vy z' = z + vz

24. Vectors themselves can be added by adding each of their components, or they can be multiplied (scaled) by multiplying each component by some constant k (where k <> 0) To calculate the length of a vector we simply calculate the distance between the origin and the point at <x,y,z> : length = | <x,y,z> - <0,0,0> | = sqrt( (x-0)*(x-0) + (y-0)*(y-0) + (z-0)*(z-0) ) = sqrt(x*x + y*y + z*z)

25. 6 5 -1,1,-1 1,1,-1 1,1,1 1 2 -1,1,1 -1,-1,-1 1,-1,-1 7 4 A 1,-1,1 0 3 -1,-1,1 Definition of Object

26. Building geometry using coordinates • Construct a pyramid by connecting the dots to form triangles

27. Winding Rule • Using a right-handed coordinate system • 3D coordinates are given in a right-handed coordinate system • X = left-to-right . • Y = bottom-to-top . • Z = back-to-front . • Distances are conventionally in meters

28. Right Hand Rule

29. Using coordinate order • Polygons have a front and back: • By default, only the front side of a polygon is rendered . • A polygon's winding order determines which side is the front . • Most polygons only need one side rendered . • You can turn on double-sided rendering, at a performance cost .

30. Using coordinate order • Use the right-hand rule: • Curl your right-hand fingers around the polygon perimeter in the order vertices are given (counter-clockwise) • Your thumb sticks out the front of the polygon

31. Back-face elimination ... culling Two Sides to a Polygon: • Most polygonal meshes have a well-defined inside and outside. • We use the right-hand rule (CCW counterclockwise winding) and specify vertices in a counterclockwise order to indicate the outside face. Culling in OpenGL: • By default, OpenGL considers polygons with counterclockwise specification to be front facing. If we specify, or render, in the opposite direction, we are rendering the back face (inward-facing face of a solid).

32. We use the right-hand rule (CCW) to specify the vertices that make up the outside faces of a polygon.

33. Translation Three degrees of Freedom in x, y, and z plane

34. Six degrees of freedom 3 degrees of freedom correspond to the rotational movement about each of the axes Pitch: Roll: Yaw

35. Scaling Multiply one or more components of the line vectors

36. MatricesA Point in Space |x| |y| |z| |w| <- w=1 a point or vector can be represented in 3D space as <x,y,z>. When using matrix maths it helps to represent it as <x,y,z,w>.

37. Modifying the Position of a Point Modifying the Position of a Point Let's say we want to take any point <x,y,z,w> given and do something to it to get a new point. A row vector can be used to represent how we want to change a point: These values                      |x| contain the                       |y|        This is our info on how we ----> |A B C D|  . |z|   <--- point in 3D want to change                    |w|        space the point To figure out how the row vector |A B C D| changes a point, we can visualize lying the point's column vector on it's side on top of it like this: | x  y  z  w | | A  B  C  D |     = (x * A) + (y * B) + (z * C) + (w * D)

38. Let's say we want to be able to take any point <x,y,z,w> and figure out the coordinates for the point <x',y',z',1> which is exactly 4 units to the "right" of it, ie the point which is 4 units further along the x axis. We can do this by using 4 row vectors. The first one will calculate the new x point (x'), the next one the new y point (y') and so on. First let's look at calculating x'. We know that the new x point can be calculated like this: x' = x + 4, so a row vector to calculate this would be: | 1  0  0  4 | i.e. when we multiply this out by a point <x,y,z,w> we'll get: (x * 1) + (y * 0) + (z * 0) + (w * 4) = x + 4

39. We also know that y' = y, z' = z and w = 1, so we can calculate the row vectors for each of the other values, and stack them all on top of each other: x row vector ---->    | 1  0  0  4 |    x'=1*x + 0*y + 0*z + 4 = x + 4 y row vector ---->    | 0  1  0  0 |    x'=0*x + 1*y + 0*z + 0 = y z row vector ---->    | 0  0  1  0 |    x'=0*x + 0*y + 1*z + 0 = z 1 row vector ---->    | 0  0  0  1 |    x'=0*x + 0*y + 0*z + 1 = 1

40. To take a point <x,y,z,w> and calculate the new point we just mutiply the point by each of the row vectors. Here's a more generic representation of what we are doing: |x'|         | M11  M12  M13 M14 |    | x | |y'|    =    | M21  M22  M23  M24 |    | y | |z'|         | M31  M32  M33  M34 |    | z | |w'|         | M41  M42  M43  M44 |    | w | In this case <x,y,z,w> is the point we are popping in, <x',y',z',w'> is the point we'll be getting out, and each number in the matrix is represented by Mij, where i = row number and j = column number.

41. x' = (x * M11) + (y * M12) + (z * M13) + M14 y' = (x * M21) + (y * M22) + (z * M23) + M24 z' = (x * M31) + (y * M32) + (z * M33) + M34 w' = (x * M41) + (y * M42) + (z * M43) + M44

42. |  1    0    0    0 |            x' = x |  0    1    0    0 |            y' = y |  0    0    1    0 |            z' = z |  0    0    0    1 |

43. Translation A translation is simply adding (or subtracting) a point to any given point. Let's say you want to add TX to x, TY to y and TZ to z. The matrix to do this is: |  1    0    0    tx |            x' = x + tx |  0    1    0    ty |            y' = y + ty |  0    0    1    tz |            z' = z + tz |  0    0    0    1  | Scaling Sometimes we may need to scale a point, ie mutiply each axis by a given number. This is handy for things like zoom effects. |  sx   0    0    0 |            x' = sx * x |  0    sy   0    0 |            y' = sy * y |  0    0    sz   0 |            z' = sz * tz |  0    0    0    1 | Of course, if you only want to scale along the X axis (say) then you simply set SX to the scale value and set SY and SZ to 1.

44. Basic Rotations Things start getting a wee bit tricky here. For starters we can rotate things around the x axis, the y axis, or the z axis. Notice how each axis forms a line in 3D space? Well we can also rotate things around any arbitrary line. This is handy if we want to do effects like objects rotating about their own axis. The matrix for rotating around the x axis by angle θ is: |  1      0      0     0 |            x' = x |  0    cos θ -sin θ 0 |            y' = (cos θ) * y - (sin θ) * z |  0    sin θ cos θ 0 |            z' = (sin θ) * y + (cos θ) * z |  0      0      0     1 | The matrix for rotating around the y axis by angle θ is: |  cos θ 0    sin θ 0 |           x' = (cos θ) * x + (sin θ) * z |    0     1     0      0 |            y' = y |  -sin θ 0    cos θ 0 |            z' = -(sin θ) * x + (cos θ) * z |    0      0    0      1 | And the matrix for rotating around the zaxis by angle θ is: |  cos θ -sin θ 0    0 |            x' = (cos θ) * x - (sin θ) * y |  sin θ cos θ 0    0 |            y' = (sin θ) * x + (cos θ) * y |    0       0      1   0 |            z' = z |    0       0      0  1 |

45. Underlying geometry • Vertices • Lines • Faces • Transforms