Computer Graphics. Lecture 04 3D Projection and Visualization. Edirlei Soares de Lima.

Transcription

1 Computer Graphics Lecture 4 3D Projection and Visualization Edirlei Soares de Lima <edirlei.lima@universidadeeuropeia.pt>

2 Projection and Visualization An important use of geometric transformations in computer graphics is in moving objects between their 3D locations and their positions in a 2D view of the 3D world. This 3D to 2D mapping is called a viewing transformation or projection.

3 Viewing Transformations The viewing transformation has the objective of mapping 3D coordinates (represented as [x, y, z] in the canonical coordinate system) to coordinates in the screen (expressed in units of pixels). Important factors: camera position and orientation, type of projection, screen resolution, field of view. Transformations: Camera Transformation: converts points in canonical coordinates (or world space) to camera coordinates; Projection Transformation: moves points from camera space to the canonical view volume; Viewport Transformation: maps the canonical view volume to screen space.

4 Viewing Transformations

5 Viewing Transformations Orthographic Projection: can be done by ignoring z-coordinate. Perspective Projection: simplified model of human eye, or camera lens (pinhole camera).

6 Viewing Transformations Orthographic Projection vs Perspective Projection

7 Viewing Transformations

8 Viewport Transformation The viewport transformation maps the canonical view volume to screen space. The canonical view volume is a cube containing all 3D points whose coordinates are between 1 and +1 (i.e. (x, y, z) [ 1, 1]). Considering a screen of n x by n y pixels, we need to map the square [ 1, 1] to the rectangle [, n x ] [, n y ].

9 Viewport Transformation Viewport transformation is windowing transformation that can be accomplished with three operations (2D example): 1. Move the points (x l, y l ) to the origin. 2. Scale the rectangle to be the same size as the target rectangle. 3. Move the origin to point (x l, y l ).

10 Viewport Transformation These operations can be represented as multiplications of matrices (2D example): T = 1 x l 1 y l 1 x h x l x h x l y h y l y h y l 1 1 x l 1 y l 1 T = x h x l x l x h x h x l x h x l x h x l y h y l y l y h y h y l y h y l y h y l 1

11 Viewport Transformation Back to our 3D problem: map the canonical view volume to screen space. x screen y screen 1 = n x n x n y n y In homogeneous coordinates: x canonical y canonical 1 M vp = n x 2 n x 1 2 n y n y (, n y ) (n x, n y ) keeps the z-coordinate (,) (n x, )

12 Viewing Transformations

13 Projection Transformation The projection transformation moves points from camera space to the canonical view volume. This is a very important step, because we usually want to render geometry in some region of space other than the canonical view volume. The simplest type of projection is parallel projection, in which 3D points are mapped to 2D by moving them along a projection direction until they hit the image plane. In the orthographic projection, the image plane is perpendicular to the view direction.

14 Orthographic Projection Our first step in generalizing the view will keep the view direction and orientation fixed looking along z with +y up, but will allow arbitrary rectangles to be viewed. The orthographic view volume is an axis-aligned box [l, r] [b, t] [f, n]. x = l left plane x = r right plane y = b bottom plane y = t top plane z = n near plane z = f far plane

15 Orthographic Projection We assume a viewer who is looking along the minus z-axis with his head pointing in the y-direction. This implies that n > f. How can we transform points that are inside of the orthographic view volume to the canonical view volume? This transform is another windowing transformation!

16 Orthographic Projection Orthographic projection matrix: M orth = 2 r l r + l r l 2 t + b t b t b 2 n + f n f n f 1 The M orth matrix can be combined with M vp matrix to transform points to screen coordinates: x screen y screen z cannonical 1 = M vp M orth x y z 1

17 Orthographic Projection Now we can start the implementation of the code to draw objects on screen (only lines): construct M vp construct M orth M = M vp M orth for each line segment (a i, b i ) do p = Ma i q = Mb i drawline(x p, y p, x q, y q ) In order to test the orthographic projection in Unity, first we need to simulate the world space and create the mesh of a 3D object.

18 ... p7 p6 public class World : MonoBehaviour{ private Mesh mesh; public Vector3[] vertices; public int[] lines; p4 p3 p5 p2 void Start() p { mesh = new Mesh(); GetComponent<MeshFilter>().mesh = mesh; mesh.name = "MyMesh"; Vector3 p = new Vector3(-1f, -1f, -1f); Vector3 p1 = new Vector3(1f, -1f, -1f); Vector3 p2 = new Vector3(1f, -1f, -3f); Vector3 p3 = new Vector3(-1f, -1f, -3f); Vector3 p4 = new Vector3(-1f, 1f, -1f); Vector3 p5 = new Vector3(1f, 1f, -1f); Vector3 p6 = new Vector3(1f, 1f, -3f); Vector3 p7 = new Vector3(-1f, 1f, -3f); p1...

19 p7 p6... p4 p5 vertices = new Vector3[] { // Bottom p, p1, p2, p3, // Left p7, p4, p, p3, // Front p4, p5, p1, p, // Back p6, p7, p3, p2, // Right p5, p6, p2, p1, // Top p7, p6, p5, p4 }; p p3 p1 p2...

20 p7 p6... p4 p5 int[] triangles = new int[] { 3, 1,, // Bottom 3, 2, 1, 7, 5, 4, // Left 7, 6, 5, 11, 9, 8, // Front 11, 1, 9, 15, 13, 12, // Back 15, 14, 13, 19, 17, 16, // Right 19, 18, 17, 23, 21, 2, // Top 23, 22, 21, }; p p3 p1 p2...

21 ... lines = new int[] {, 1,, 3,, 5, 1, 2, 1, 9, 2, 3, 2, 12, 3, 4, 5, 9, 5, 4, 9, 12, 12, 4 }; p4 p p7 p3 p1 p5 p6 p2 } } mesh.vertices = vertices; mesh.triangles = triangles; mesh.recalculatenormals();

22 Orthographic Projection After simulating the world space, we need to: Define the orthographic view volume; Construct the M vp and M orth matrices; Draw the objects in screen space. n x n x n M vp = y n x M orth = 2 r l r + l r l 2 t + b t b t b 2 n + f n f n f 1 orthographic view volume

23 ... public class ViewTrasform : MonoBehaviour { public World world; private float left_plane = 5f; private float right_plane = -5f; private float botton_plane = -5f; private float top_plane = 5f; private float near_plane = -1f; private float far_plane = -11f;...

24 ... void OnGUI() { Matrix4x4 mvp = new Matrix4x4(); mvp.setrow(,new Vector4(Screen.width/2f,f,f,(Screen.width-1)/2f)); mvp.setrow(1,new Vector4(f,Screen.height/2f,f,(Screen.height-1)/2f)); mvp.setrow(2,new Vector4(f, f, 1f, f)); mvp.setrow(3,new Vector4(f, f, f, 1f)); Matrix4x4 morth = new Matrix4x4(); morth.setrow(, new Vector4(2f / (right_plane - left_plane), f, f, -((right_plane+left_plane)/(right_plane-left_plane)))); morth.setrow(1, new Vector4(f, 2f / (top_plane - botton_plane), f, -((top_plane + botton_plane) / (top_plane - botton_plane)))); morth.setrow(2, new Vector4(f, f, 2f / (near_plane - far_plane), -((near_plane + far_plane) / (near_plane - far_plane)))); morth.setrow(3, new Vector4(f, f, f, 1f)); Matrix4x4 m = mvp * morth;...

25 ... for (int i = ; i < world.lines.length; i+=2) { Vector4 p = multiplypoint(m, new Vector4(world.vertices[world.lines[i]].x, world.vertices[world.lines[i]].y, world.vertices[world.lines[i]].z, 1)); Vector4 q = multiplypoint(m, new Vector4(world.vertices[world.lines[i + 1]].x, world.vertices[world.lines[i + 1]].y, world.vertices[world.lines[i + 1]].z, 1)); GuiHelper.DrawLine(new Vector2(p.x, p.y), new Vector2(q.x, q.y), Color.black); } }

26 Matrix by Point Multiplication Vector4 multiplypoint(matrix4x4 matrix, Vector4 point) { Vector4 result = new Vector4(); for (int r = ; r < 4; r++) { float s = ; for (int z = ; z < 4; z++) s += matrix[r, z] * point[z]; result[r] = s; } return result; } Note: we could also use the function Matrix4x4.MultiplyPoint(Vector3 point), but it multiplies the matrix by a Vector3 and returns another Vector3. For now this is not a problem, but it will be a problem when we need the w coordinate to do perspective projection.

27 Exercise 1 1) How do you know that the resulting rectangle on screen is correct? Use the rotation transformations to rotate the object and see if it looks 3D.

28 Viewing Transformations

29 Camera Transformation The camera transformation converts points in world space to camera coordinates. This transformation allow us to change the viewpoint in 3D and look in any direction. Camera specification: Eye position (e): location that the eye sees from ; Gaze direction (g): vector in the direction that the viewer is looking; View-up vector (t): vector in the plane that both bisects the viewer s head into right and left halves (for a person standing on the ground, it points to the sky ).

30 Camera Transformation The camera vectors provide enough information to set up a coordinate system with origin e and a uvw basis. w = g g u = t w t w v = u w

31 Camera Transformation After set up the coordinate system with origin e and a uvw basis, we need to convert the coordinates of the objects from xyz-coordinates into uvw-coordinates. Step 1: Translate e to the world origin (,, ); T = 1 x e 1 y e 1 w e 1 Step 2: Rotate uvw to align it with xyz; R = x u y u z u x v y v z v x w y w z w 1

32 Camera Transformation After set up the coordinate system with origin e and a uvw basis, we need to convert the coordinates of the objects from xyz-coordinates into uvw-coordinates. M cam = x u y u z u x v y v z v x w y w z w 1 1 x e 1 y e 1 w e 1 M cam = x u y u z u (x u x e + y u y e + z u z e ) x v y v z v (x v x e + y v y e + z v z e ) x w y w z w (x w x e + y w y e + z w z e ) 1

33 Camera Transformation Now we can make the viewing algorithm work for cameras with any location and orientation. The camera transformation is added to the product of the viewport and projection transformations, so that it converts the incoming points from world to camera coordinates before they are projected. construct M vp construct M orth construct M cam M = M vp M orth M cam for each line segment (a i, b i ) do p = Ma i q = Mb i drawline(x p, y p, x q, y q )

34 Camera Transformation In order to add the camera transformation to our implementation in Unity, first we define the camera properties:... public class ViewTrasform : MonoBehaviour {... public Vector3 eye; public Vector3 gaze; public Vector3 up;...

35 ... Vector3 w = -gaze.normalized; Vector3 u = Vector3.Cross(up, w).normalized; Vector3 v = Vector3.Cross(w, u); Matrix4x4 mcam = new Matrix4x4(); mcam.setrow(, new Vector4(u.x, u.y, u.z, -((u.x * eye.x) + (u.y * eye.y) + (u.z * eye.z)))); mcam.setrow(1, new Vector4(v.x, v.y, v.z, -((v.x * eye.x) + (v.y * eye.y) + (v.z * eye.z)))); mcam.setrow(2, new Vector4(w.x, w.y, w.z, -((w.x * eye.x) + (w.y * eye.y) + (w.z * eye.z)))); mcam.setrow(3, new Vector4(,,, 1)); UpdateViewVolume(eye); Matrix4x4 m = mvp * (morth * mcam);... Update the position of the view volume based on the camera position.

36 ... void UpdateViewVolume(Vector3 e) { near_plane = e.z - 3; far_plane = e.z - 13; right_plane = e.x - 5; left_plane = e.x + 5; top_plane = e.y + 5; botton_plane = e.y - 5; }... Not the best solution!!!

37 Perspective Projection Perspective projection models how we see the real world. Objects appear smaller with distance.

38 Perspective Projection The key property of perspective is that the size of an object on the screen is proportional to 1/z for an eye at the origin looking up the negative z-axis. 2D Example: y s = d z y y is the distance of the point along the y-axis. y s is where the point should be drawn on the screen.

39 Perspective Projection In order to implement perspective projection as a matrix multiplication (in which one of the coordinates of the input vector appears in the denominator), we can rely on a generalization of the homogeneous coordinates: In homogeneous coordinates, we represent the point x, y, z as [x, y, z, 1], where the extra coordinate w is always equal to 1. Rather than just thinking of the 1 as an extra piece in the matrix multiplication to implement translation, we now define it to be the denominator of the x-, y-, and z-coordinates: x, y, z, w x w, y w, z w

40 Perspective Projection The perspective matrix maps the Perspective View Volume (which is shaped like a frustum or pyramid) to the Orthographic View Volume (which is an axis-aligned box). P = n n n + f 1 fn M per = M orth P M per = 2n r l 2n t b l + r l r b + t b t f + n n f 1 2fn f n

41 View Volumes

42 Perspective Projection To integrate the perspective matrix into our implementation, we simply replace M orth with M per, which inserts the perspective matrix P after the camera matrix M cam has been applied: M = M vp M orth PM cam

43 Perspective Projection To integrate the perspective matrix into our implementation, we simply replace M orth with M per, which inserts the perspective matrix P after the camera matrix M cam has been applied: M = M vp M orth PM cam The resulting algorithm is: construct M vp construct M per construct M cam M = M vp M per M cam for each line segment (a i, b i ) do p = Ma i q = Mb i drawline(x p /w p, y p /w p, x q /w q, y q /w q )

44 ... Matrix4x4 mper = new Matrix4x4(); mper.setrow(, new Vector4(near_plane, f, f, f)); mper.setrow(1, new Vector4(f, near_plane, f, f)); mper.setrow(2, new Vector4(f, f, near_plane + far_plane, -(far_plane * near_plane))); mper.setrow(3, new Vector4(f, f, 1f, f));... Matrix4x4 m = mvp * ((morth * mper) * mcam); for (int i = ; i < world.lines.length; i+=2) { Vector4 p = multiplypoint(m, new Vector4(world.vertices[world.lines[i]].x, world.vertices[world.lines[i]].y, world.vertices[world.lines[i]].z, 1)); Vector4 q = multiplypoint(m, new Vector4(world.vertices[world.lines[i + 1]].x, world.vertices[world.lines[i + 1]].y, world.vertices[world.lines[i + 1]].z, 1)); GuiHelper.DrawLine(new Vector2(p.x/p.w, p.y/p.w), new Vector2(q.x/q.w, q.y/q.w), Color.black); }...

45 Exercise 2 2) The implementation of the Perspective Projection is creating M per by multiplying M orth and P, which is not the most efficient way of performing the perspective projection. Change the code in order to use the final product of the matrices: M per = M orth P = 2n r l 2n t b l + r l r b + t b t f + n n f 1 2fn f n

46 Field-of-View As the orthographic view volume, the perspective view volume can be defined by 6 parameters, in camera coordinates: Left, right, top, bottom, near, far. However, sometimes we would like to have a simpler system where we look through the center of the window. right = left botton = top n x = right n y top tan θ 2 = top near

47 Field-of-View With the simplified system, we have only 4 parameters: Field-of-view (θ); Image aspect ratio (screen width/height); Near, and far clipping planes; M per = 1 tan θ aspect 1 tan(θ) f + n n f 1 2fn f n

48 Exercise 3 3) Implement the simplified perspective view volume with fieldof-view in Unity. θ must be converted to radians. M per = 1 tan θ aspect 1 tan(θ) f + n n f 1 2fn f n

49 Further Reading Hughes, J. F., et al. (213). Computer Graphics: Principles and Practice (3rd ed.). Upper Saddle River, NJ: Addison-Wesley Professional. ISBN: Chapter 13: Camera Specifications and Transformations Marschner, S., et al. (215). Fundamentals of Computer Graphics (4th ed.). A K Peters/CRC Press. ISBN: Chapter 8: Viewing