WEBVTT 1 00:00:05.623 --> 00:00:09.870 Basics of Games Production Mechanism of Game Contents 4 (Triangle, Texture Mapping) 2 00:00:09.870 --> 00:00:12.141 GCC Academy 3 00:00:27.501 --> 00:00:29.020 Hello, everyone 4 00:00:29.020 --> 00:00:30.860 This is Lee Deukwoo of Game Math 5 00:00:30.860 --> 00:00:34.210 During this time, we're going to talk about the topic of 6 00:00:34.210 --> 00:00:36.419 triangle and texture mapping 7 00:00:36.419 --> 00:00:38.119 The talk on triangles 8 00:00:38.119 --> 00:00:40.419 is composed of three parts 9 00:00:40.419 --> 00:00:44.540 Last time, we talked about the affine combination of two points 10 00:00:44.540 --> 00:00:47.440 This time, we're going to talk about 11 00:00:47.440 --> 00:00:49.020 the affine combination of three points 12 00:00:49.020 --> 00:00:52.099 Next, we'll explain about the mesh structure that applies 13 00:00:52.099 --> 00:00:56.220 the triangle made with the affine combination of three points 14 00:00:56.220 --> 00:00:59.120 Then we'll learn about 15 00:00:59.120 --> 00:01:01.900 the barycentric coordinate that we can utilize in triangles 16 00:01:01.900 --> 00:01:04.059 The final is about texture mapping 17 00:01:04.059 --> 00:01:07.900 We're going to learn about how to 18 00:01:07.900 --> 00:01:09.860 apply images on the surface of a triangle 19 00:01:10.381 --> 00:01:14.113 Triangle 20 00:01:14.660 --> 00:01:18.779 First, I'm going to explain about the affine combination of three points 21 00:01:18.779 --> 00:01:21.900 As you can see in the expression 22 00:01:21.900 --> 00:01:26.419 for the affine combination of three points 23 00:01:26.419 --> 00:01:28.869 each of the coefficients of the three points 24 00:01:28.869 --> 00:01:31.500 can be used and combined 25 00:01:31.500 --> 00:01:35.099 The sum of these three coefficients must be 1 26 00:01:35.099 --> 00:01:37.149 Therefore, the last coefficient 27 00:01:37.149 --> 00:01:41.996 must be equal to 1 minus the first and second coefficient 28 00:01:41.996 --> 00:01:44.540 in order for us to form a point 29 00:01:44.540 --> 00:01:47.840 With the affine combination expression that we made 30 00:01:47.840 --> 00:01:54.500 If we pass P3 over and then proceed 31 00:01:54.500 --> 00:02:00.050 P'-P3, then s outside the parenthesis of P1-P3 32 00:02:00.050 --> 00:02:03.379 and t outside the parenthesis of P2-P3 33 00:02:03.379 --> 00:02:07.429 Point minus point 34 00:02:07.429 --> 00:02:10.820 Thus, it can be expressed with three vectors that start at P3 35 00:02:10.820 --> 00:02:14.779 I expressed each as w, u, and v 36 00:02:14.779 --> 00:02:16.926 Here, s and t is multiplied to each 37 00:02:16.926 --> 00:02:21.188 The affine combination expression can be converted 38 00:02:21.188 --> 00:02:25.339 into a vector expression like this 39 00:02:25.339 --> 00:02:27.740 We learned earlier that 40 00:02:27.740 --> 00:02:34.500 if vector u and v are two-dimensional vectors 41 00:02:34.500 --> 00:02:38.700 and if they are linearly independent 42 00:02:38.700 --> 00:02:43.259 the result of multiplying scalar values 43 00:02:43.259 --> 00:02:46.059 in the sense of dimension 44 00:02:46.059 --> 00:02:49.159 when we learned linear independency earlier 45 00:02:49.159 --> 00:02:50.940 we've said that they create a flat surface 46 00:02:50.940 --> 00:02:55.840 When we combine two linearly independent vectors 47 00:02:55.840 --> 00:02:59.259 then we make a flat surface 48 00:02:59.259 --> 00:03:03.899 Therefore, the combination of three points 49 00:03:03.899 --> 00:03:08.499 can ultimately create all the points 50 00:03:08.499 --> 00:03:14.599 belonging to the same surface 51 00:03:14.599 --> 00:03:17.699 For this combination 52 00:03:17.699 --> 00:03:22.849 each coefficient, which are s, t, and 1-s-t 53 00:03:22.849 --> 00:03:24.531 For these three coefficients 54 00:03:24.531 --> 00:03:28.564 if we decrease the range to greater than or equal to 0 55 00:03:28.564 --> 00:03:33.339 and less than or equal to 1 56 00:03:33.339 --> 00:03:36.689 let's take a look at each 57 00:03:36.689 --> 00:03:41.619 When s=1, t=0 58 00:03:41.619 --> 00:03:46.619 and 1-s-t is also 0, so it becomes the point P1 59 00:03:46.619 --> 00:03:49.019 When t=1, P2 60 00:03:49.019 --> 00:03:51.481 When s=0 and t is also 0 61 00:03:51.481 --> 00:03:54.580 it becomes point P3 no matter what 62 00:03:54.580 --> 00:03:58.730 Next, when we fix one value 63 00:03:58.730 --> 00:04:00.860 and adjust the two values 64 00:04:00.860 --> 00:04:06.110 the lines corresponding to that value 65 00:04:06.110 --> 00:04:08.339 can be made 66 00:04:08.339 --> 00:04:11.689 When we adjust all the values 67 00:04:11.689 --> 00:04:17.779 the triangle area is made 68 00:04:17.779 --> 00:04:24.660 Last time, when we combined two points 69 00:04:24.660 --> 00:04:29.220 we've said that if "a" value goes from positive to negative infinity 70 00:04:29.220 --> 00:04:31.770 then this means an abstract line 71 00:04:31.770 --> 00:04:34.739 that extends out infinitely 72 00:04:34.739 --> 00:04:37.889 However, when the coefficient is greater than or equal to 0 73 00:04:37.889 --> 00:04:39.380 and less than 1 74 00:04:39.380 --> 00:04:41.930 then we get a segment that we can express 75 00:04:41.930 --> 00:04:47.059 with a clear start point and end point 76 00:04:47.059 --> 00:04:50.859 Same thing goes for combining three points 77 00:04:50.859 --> 00:04:53.409 If the range of each coefficient 78 00:04:53.409 --> 00:04:55.899 is between 0 and 1 79 00:04:55.899 --> 00:04:58.648 it forms an object 80 00:04:58.648 --> 00:05:01.660 that we can actually configure 81 00:05:01.660 --> 00:05:04.110 Therefore, this condition 82 00:05:04.110 --> 00:05:06.596 where all the coefficients in an affine combination 83 00:05:06.596 --> 00:05:09.820 are greater than 0 and less than 1 84 00:05:09.820 --> 00:05:11.908 creates the range of the object 85 00:05:11.908 --> 00:05:14.859 that we can visualize 86 00:05:14.859 --> 00:05:19.899 And this is called a convex combination 87 00:05:19.899 --> 00:05:23.087 As you can see here, up to here 88 00:05:23.087 --> 00:05:27.779 was the condition we had in the original affine combination 89 00:05:27.779 --> 00:05:29.829 The red one on the right 90 00:05:29.829 --> 00:05:34.079 is the strengthened condition from the affine combination 91 00:05:34.079 --> 00:05:37.779 and this represents the convex combination 92 00:05:37.779 --> 00:05:40.529 So when it's not the convex combination 93 00:05:40.529 --> 00:05:43.729 it creates an infinite line 94 00:05:43.729 --> 00:05:49.380 or points belonging to a surface 95 00:05:49.380 --> 00:05:52.830 But convex combination creates a visualized shape 96 00:05:52.830 --> 00:05:54.612 A shape with a clear start 97 00:05:54.612 --> 00:05:57.228 and an end 98 00:05:57.228 --> 00:06:00.128 Then what does this convex mean? 99 00:06:00.128 --> 00:06:02.380 It might be an unfamiliar word 100 00:06:02.380 --> 00:06:05.580 In Korean, it means convex 101 00:06:05.580 --> 00:06:07.899 You probably all know what convex is 102 00:06:07.899 --> 00:06:11.356 The opposite of convex is concave 103 00:06:11.356 --> 00:06:13.691 In English, it's convex 104 00:06:13.691 --> 00:06:17.339 and concave 105 00:06:17.339 --> 00:06:22.089 In daily life, convex and concave means 106 00:06:22.089 --> 00:06:25.380 this, and going in like this 107 00:06:25.380 --> 00:06:28.580 That's what how we use them in everyday life 108 00:06:28.580 --> 00:06:32.540 In math, they wouldn't define it in vague forms like this 109 00:06:32.540 --> 00:06:35.140 In math, how is convex determined? 110 00:06:35.140 --> 00:06:37.500 This is how convex is determined 111 00:06:37.500 --> 00:06:40.550 When there's an area 112 00:06:40.550 --> 00:06:44.140 we select two arbitrary points in that area 113 00:06:44.140 --> 00:06:48.090 When a line is drawn to connect the two points 114 00:06:48.090 --> 00:06:53.940 and if the line always stays inside that area 115 00:06:53.940 --> 00:06:57.890 then that area is called convex 116 00:06:57.890 --> 00:07:00.190 On the other hand, for concave 117 00:07:00.190 --> 00:07:03.540 when you select two points and draw a line 118 00:07:03.540 --> 00:07:05.790 and if it goes outside of that area 119 00:07:05.790 --> 00:07:07.990 we call it concave 120 00:07:07.990 --> 00:07:09.743 To see it in pictures 121 00:07:09.743 --> 00:07:12.660 this is a convex area 122 00:07:12.660 --> 00:07:16.191 and this can be defined as 123 00:07:16.191 --> 00:07:20.468 a concave area 124 00:07:20.468 --> 00:07:24.318 Therefore, convexity 125 00:07:24.318 --> 00:07:27.535 is ultimately in this form 126 00:07:27.535 --> 00:07:29.935 Triangles, that we're going to talk about today 127 00:07:29.935 --> 00:07:34.901 are one of the representative convex shapes 128 00:07:34.901 --> 00:07:37.251 The properties of convex 129 00:07:37.251 --> 00:07:40.624 are useful in graphics as well 130 00:07:40.624 --> 00:07:43.000 but it's actually very useful in physics engine 131 00:07:43.000 --> 00:07:47.250 When you use things like mesh collider 132 00:07:47.250 --> 00:07:49.340 you have probably heard about convex a lot 133 00:07:49.340 --> 00:07:51.840 That's the convex I just talked about 134 00:07:51.840 --> 00:07:54.340 These convexing areas 135 00:07:54.340 --> 00:07:56.840 become the foundation of mechanisms 136 00:07:56.840 --> 00:08:00.498 that can calculate collisions 137 00:08:00.498 --> 00:08:02.840 in a much more simple, easy way 138 00:08:02.840 --> 00:08:05.840 Therefore, physics engine greatly prefers the convex 139 00:08:05.840 --> 00:08:07.991 However, since we're using graphics 140 00:08:07.991 --> 00:08:13.080 we'll just keep in mind that those are the properties 141 00:08:13.080 --> 00:08:17.080 Then now, I'll explain about how convex 142 00:08:17.080 --> 00:08:22.080 can actually be used in graphics 143 00:08:22.080 --> 00:08:26.080 Before that, what would happen if we combine four points? 144 00:08:26.080 --> 00:08:30.580 When we combine four points, it's the same for this 145 00:08:30.580 --> 00:08:34.758 Among the four coefficients, the last coefficient 146 00:08:34.768 --> 00:08:38.119 would be equal to 1 minus the three coefficients 147 00:08:38.119 --> 00:08:41.119 When expressed in a vector expression, like the following 148 00:08:41.119 --> 00:08:43.419 the coefficients of three vectors would be added 149 00:08:43.419 --> 00:08:47.907 to be linearly combined 150 00:08:47.907 --> 00:08:52.120 When all these vectors are linearly independent 151 00:08:52.120 --> 00:08:53.848 this shape 152 00:08:53.848 --> 00:08:58.298 will be able to infinitely make points 153 00:08:58.298 --> 00:09:00.298 belonging to this three-dimensional space 154 00:09:00.298 --> 00:09:02.288 through this combined expression 155 00:09:02.288 --> 00:09:05.238 But if we limit the range of each coefficient 156 00:09:05.238 --> 00:09:09.388 to greater than or equal to 0 and less than or equal to 1 157 00:09:09.388 --> 00:09:13.417 then this would create a convex area 158 00:09:13.417 --> 00:09:15.617 A three-dimensional space 159 00:09:15.617 --> 00:09:18.026 made with this convex combination 160 00:09:18.026 --> 00:09:20.126 looks like a tetrahedron 161 00:09:20.126 --> 00:09:22.769 We usually call it a triangular pyramid 162 00:09:22.769 --> 00:09:24.660 It becomes an area of tetrahedron 163 00:09:24.660 --> 00:09:28.010 Within this area, no matter which two points are chosen 164 00:09:28.010 --> 00:09:29.467 to draw a straight line 165 00:09:29.467 --> 00:09:33.595 it cannot escape this tetrahedron 166 00:09:33.595 --> 00:09:36.427 That was an explanation about convex 167 00:09:36.427 --> 00:09:39.031 There are various convexes like these 168 00:09:39.031 --> 00:09:43.199 We created a segment using two points 169 00:09:43.199 --> 00:09:44.387 and that's also a convex 170 00:09:44.387 --> 00:09:46.684 We combined three points to form a triangle 171 00:09:46.684 --> 00:09:48.797 And we combined four points to form a tetrahedron 172 00:09:48.797 --> 00:09:51.961 All these were convex areas 173 00:09:51.961 --> 00:09:55.842 Using these convex shapes 174 00:09:55.842 --> 00:09:59.142 we need to express objects in the three-dimensional space 175 00:09:59.142 --> 00:10:01.834 that are similar to reality 176 00:10:01.834 --> 00:10:04.734 The main reference structure we use here 177 00:10:04.734 --> 00:10:07.854 is a reference called mesh 178 00:10:11.082 --> 00:10:13.682 About this mesh structure 179 00:10:13.682 --> 00:10:15.882 here, I organized the mesh structures 180 00:10:15.882 --> 00:10:17.636 that are normally used 181 00:10:17.636 --> 00:10:20.718 First of all 182 00:10:20.718 --> 00:10:24.329 among the segment, triangle, and tetrahedron that we mentioned earlier 183 00:10:24.329 --> 00:10:27.679 the most useful convex area 184 00:10:27.679 --> 00:10:30.913 is actually the triangle 185 00:10:30.913 --> 00:10:33.596 You might have guessed, but it's the triangle 186 00:10:33.596 --> 00:10:37.246 That's because if we use triangles 187 00:10:37.246 --> 00:10:40.279 we can express two-dimension very effectively 188 00:10:40.279 --> 00:10:42.229 Not all graphics use 189 00:10:42.229 --> 00:10:43.883 three-dimension 190 00:10:43.883 --> 00:10:45.279 so we use two-dimensions as well 191 00:10:45.279 --> 00:10:46.929 In the case of three-dimensions 192 00:10:46.929 --> 00:10:53.675 we express the stereoscopy of three-dimension 193 00:10:53.675 --> 00:10:58.320 but we don't show the insides 194 00:10:58.320 --> 00:10:59.970 Especially for games 195 00:10:59.970 --> 00:11:03.617 there's no reason to show the insides in detail 196 00:11:03.617 --> 00:11:09.716 because we need to show them quickly 197 00:11:09.716 --> 00:11:12.449 We don't think about the contents inside 198 00:11:12.449 --> 00:11:15.721 We just use light and reflection 199 00:11:15.721 --> 00:11:18.577 to quickly express the outer surface 200 00:11:18.577 --> 00:11:21.746 For the back side as well, we think of the drawing 201 00:11:21.746 --> 00:11:22.954 when we deal with the surface 202 00:11:22.954 --> 00:11:24.469 It's because speed is important 203 00:11:24.469 --> 00:11:26.750 So for 3D objects as well 204 00:11:26.750 --> 00:11:28.360 when we use triangles 205 00:11:28.360 --> 00:11:31.558 to put together the surfaces 206 00:11:31.558 --> 00:11:35.657 we can express various forms of 3D 207 00:11:35.657 --> 00:11:38.360 And that's why we prefer triangles 208 00:11:38.360 --> 00:11:40.877 We can combine many triangles 209 00:11:40.877 --> 00:11:44.063 to create complex objects like this 210 00:11:44.063 --> 00:11:46.617 Then these complex objects 211 00:11:46.617 --> 00:11:50.043 are ultimately a collection of triangles 212 00:11:50.043 --> 00:11:53.795 The data that organized and saved those things 213 00:11:53.795 --> 00:11:56.607 is called a mesh 214 00:11:56.607 --> 00:12:00.894 There are various types of mesh structures 215 00:12:00.894 --> 00:12:03.706 Right now, a majority of them 216 00:12:03.706 --> 00:12:07.755 manage the vertex information and the triangle information separately 217 00:12:07.755 --> 00:12:11.835 and this is called the Triangle List 218 00:12:11.835 --> 00:12:15.755 Most of them use this method 219 00:12:15.755 --> 00:12:19.559 To briefly explain about this triangle list 220 00:12:19.559 --> 00:12:23.757 that's often used in mesh structures 221 00:12:23.757 --> 00:12:26.024 Let's say that we're expressing a square like this 222 00:12:26.024 --> 00:12:29.113 This square is composed of two triangles 223 00:12:29.113 --> 00:12:31.513 Then this triangle 224 00:12:31.513 --> 00:12:33.440 must include three points 225 00:12:33.440 --> 00:12:36.440 in order for us to form a triangle 226 00:12:36.440 --> 00:12:42.054 Since this square is composed of 2 triangles 227 00:12:42.054 --> 00:12:45.143 if we have a maximum of 6 points 228 00:12:45.143 --> 00:12:47.906 then we can express a square 229 00:12:47.906 --> 00:12:52.331 If these triangles are connected 230 00:12:52.331 --> 00:12:55.024 the second point and the 0th point 231 00:12:55.024 --> 00:12:57.945 The very first 0th point and the second point 232 00:12:57.945 --> 00:12:59.935 can be shared, actually 233 00:12:59.935 --> 00:13:01.485 Then we can 234 00:13:01.485 --> 00:13:02.826 use the data more efficiently 235 00:13:02.826 --> 00:13:04.777 in cases when they're connected like this 236 00:13:04.777 --> 00:13:07.252 So we'll just gather up the points 237 00:13:07.252 --> 00:13:08.965 A total of four points has been used 238 00:13:08.965 --> 00:13:11.935 We would gather up only the points in order 239 00:13:11.935 --> 00:13:16.539 And we would use this order information 240 00:13:16.539 --> 00:13:21.162 and utilize the information about this shared point as much as we can 241 00:13:21.162 --> 00:13:23.766 to compose the list of triangles 242 00:13:23.766 --> 00:13:26.093 That's what an index buffer is 243 00:13:26.093 --> 00:13:29.687 We gather up the points, make the vertex buffer, and 244 00:13:29.687 --> 00:13:31.987 then create the index buffer 245 00:13:31.987 --> 00:13:33.757 about the triangle 246 00:13:33.757 --> 00:13:36.885 So this index buffer 247 00:13:36.885 --> 00:13:40.559 always includes information about the points composing the triangle 248 00:13:40.559 --> 00:13:44.074 We don't write the coordinates of these points here 249 00:13:44.074 --> 00:13:47.024 It's in the form of pointing to the index order 250 00:13:47.024 --> 00:13:48.975 used in the vertex buffer 251 00:13:48.975 --> 00:13:52.995 In the index buffer, there's always three times 252 00:13:52.995 --> 00:13:56.450 the number of triangles 253 00:13:56.450 --> 00:13:58.400 If you see here, the index buffer is 254 00:13:58.400 --> 00:14:00.915 composed of two triangles, and therefore 255 00:14:00.915 --> 00:14:04.846 3x2, so it would be composed of 6 elements 256 00:14:04.846 --> 00:14:07.045 It's composed of 6 elements and 257 00:14:07.045 --> 00:14:13.709 going in order, the 0th 258 00:14:13.709 --> 00:14:17.788 the first point of the first triangle is number 0 259 00:14:17.788 --> 00:14:21.748 Second point is 1, and third point is 2 260 00:14:21.748 --> 00:14:23.838 That's how the first triangle is set up 261 00:14:23.838 --> 00:14:27.442 For the second triangle, number 0, 2, and 3 262 00:14:27.442 --> 00:14:29.600 That's how the second triangle is set 263 00:14:29.600 --> 00:14:32.254 For information like the location 264 00:14:32.254 --> 00:14:35.313 we record it in the vertex buffer, in detail 265 00:14:35.313 --> 00:14:37.739 That's because there could be overlaps 266 00:14:37.739 --> 00:14:41.204 In order to avoid overlapping where there's a lot of data 267 00:14:41.204 --> 00:14:43.854 they're taken care of in the vertex buffer 268 00:14:43.854 --> 00:14:47.066 And that's the composition 269 00:14:47.066 --> 00:14:51.511 If we connect the points for each triangle and draw the lines 270 00:14:51.511 --> 00:14:54.046 we can embody a mesh like this 271 00:14:54.046 --> 00:14:56.496 Expressing a mesh like this 272 00:14:56.496 --> 00:14:58.878 is usually called wireframe 273 00:14:58.878 --> 00:15:00.659 For this wireframe 274 00:15:00.659 --> 00:15:03.809 when drawing the line 275 00:15:03.809 --> 00:15:08.619 Bresenham's line algorithm, that we talked about earlier, was used 276 00:15:08.619 --> 00:15:10.819 When we handle mesh, one of the important concepts 277 00:15:10.819 --> 00:15:13.460 that we need to know is barycentric coordinate 278 00:15:13.460 --> 00:15:17.859 Since we're going to use triangles 279 00:15:17.859 --> 00:15:20.342 the affine combinations and convex combinations 280 00:15:20.342 --> 00:15:22.259 that we'll use from now on 281 00:15:22.259 --> 00:15:24.099 will be a combination of three points 282 00:15:24.099 --> 00:15:26.799 This coefficient that we use in the combination of three points 283 00:15:26.799 --> 00:15:31.260 s, t, 1-s-t, these three coefficients 284 00:15:31.260 --> 00:15:33.558 are scalar, right? 285 00:15:33.558 --> 00:15:35.700 So we will combine scalars 286 00:15:35.700 --> 00:15:37.739 and be able to make vectors 287 00:15:37.739 --> 00:15:41.139 Just like that, the coordinate that made the 3D vector 288 00:15:41.139 --> 00:15:43.099 is widely called 289 00:15:43.099 --> 00:15:45.900 the barycentric coordinate 290 00:15:45.900 --> 00:15:48.700 This is how we calculate the barycentric coordinate 291 00:15:48.700 --> 00:15:53.400 Just like before, we proceed by converting points 292 00:15:53.400 --> 00:15:55.099 into vectors 293 00:15:55.099 --> 00:15:58.699 In this location where there's three points 294 00:15:58.699 --> 00:16:01.179 let's say that there's an imaginary surface 295 00:16:01.179 --> 00:16:05.629 Then for an arbitrary point on the surface 296 00:16:05.629 --> 00:16:09.020 we can create these 3 vectors 297 00:16:09.020 --> 00:16:11.500 We did this earlier 298 00:16:11.500 --> 00:16:14.250 Then for this arbitrary point 299 00:16:14.250 --> 00:16:21.059 we need to get the barycentric coordinate, s, t, 1-s-t 300 00:16:21.059 --> 00:16:25.409 If each of the three coefficients 301 00:16:25.409 --> 00:16:30.099 don't lie between 0 and 1 302 00:16:30.099 --> 00:16:34.020 then that means it went outside of this triangle area 303 00:16:34.020 --> 00:16:37.320 If at least one of them is not between 0 and 1 304 00:16:37.320 --> 00:16:39.859 then no matter where we are at 305 00:16:39.859 --> 00:16:42.509 it can be mathematically recognized 306 00:16:42.509 --> 00:16:44.820 that it went outside the triangle no matter what 307 00:16:44.820 --> 00:16:47.920 Then when we color the triangle 308 00:16:47.920 --> 00:16:52.859 during the rasterization process, we would obtain 309 00:16:52.859 --> 00:16:55.780 the barycentric coordinates of the pixels we would color 310 00:16:55.780 --> 00:16:58.480 And as long as we prove that all the values 311 00:16:58.480 --> 00:17:02.380 of the barycentric coordinate are between 0 and 1 312 00:17:02.380 --> 00:17:04.542 then we can determine 313 00:17:04.542 --> 00:17:07.339 that the pixel is inside the triangle 314 00:17:07.339 --> 00:17:09.089 If we color just those pixels 315 00:17:09.089 --> 00:17:12.739 then we would be able to color inside the triangle 316 00:17:12.739 --> 00:17:15.589 Then we'll use an expression 317 00:17:15.589 --> 00:17:18.780 to see how we obtain that barycentric coordinate 318 00:17:18.780 --> 00:17:23.884 With these linear combination of vectors from the earlier expression 319 00:17:23.884 --> 00:17:28.979 we can obtain the vector of the arbitrary point 320 00:17:28.979 --> 00:17:34.219 On this arbitrary point, we'll do ·u, a dot product 321 00:17:34.219 --> 00:17:37.880 Since the distributive property stands for dot products 322 00:17:37.880 --> 00:17:40.630 we can put a dot product for each 323 00:17:40.630 --> 00:17:42.619 through the distributive property 324 00:17:42.619 --> 00:17:46.619 Additionally, we'll multiply u·u 325 00:17:46.619 --> 00:17:50.719 Actually, this gets us a scalar value 326 00:17:50.719 --> 00:17:54.419 and this is also a scalar, so when we multiply scalars 327 00:17:54.419 --> 00:18:00.579 the distributive property of real numbers becomes valid 328 00:18:00.579 --> 00:18:04.780 Therefore, you can just think of it as multiplying numbers 329 00:18:04.780 --> 00:18:10.705 So when we multiply this to both sides, it will take this form 330 00:18:10.705 --> 00:18:12.018 This form 331 00:18:12.018 --> 00:18:14.819 If you look at the "s" side here 332 00:18:14.819 --> 00:18:18.969 There's u·u, u·v and u·v, u·u 333 00:18:18.969 --> 00:18:20.859 so you can see that they're the same 334 00:18:20.859 --> 00:18:23.159 If you eliminate these 335 00:18:23.159 --> 00:18:27.500 s would be eliminated, and you would be left with t 336 00:18:27.500 --> 00:18:29.219 You would be left with t and 337 00:18:29.219 --> 00:18:33.969 If you take "t" out and then divide the result 338 00:18:33.969 --> 00:18:38.219 we can obtain this value of t 339 00:18:38.219 --> 00:18:43.123 Using the same method, we'll 340 00:18:43.123 --> 00:18:46.423 use u·v and v·v on both sides, and eliminate t 341 00:18:46.423 --> 00:18:48.739 Then we get this value for s 342 00:18:48.739 --> 00:18:52.789 Through these expressions, we can obtain s and t 343 00:18:52.789 --> 00:18:55.579 and we can also obtain 1-s-t 344 00:18:55.579 --> 00:18:57.880 Using those 3 coefficients 345 00:18:57.880 --> 00:19:00.580 if all those values are greater than or equal to 0 346 00:19:00.580 --> 00:19:03.380 and less than or equal to 1 347 00:19:03.380 --> 00:19:06.948 then we can color the corresponding pixel 348 00:19:06.948 --> 00:19:10.798 If we have a triangle, we can 349 00:19:10.798 --> 00:19:13.459 obtain the pixels of the rectangle surrounding this triangle 350 00:19:13.459 --> 00:19:16.809 Then all the pixels inside this rectangular area 351 00:19:16.809 --> 00:19:18.180 would be candidates 352 00:19:18.180 --> 00:19:21.030 Then we would go through each pixel 353 00:19:21.030 --> 00:19:23.880 and decide whether to color it 354 00:19:23.880 --> 00:19:25.380 or not 355 00:19:25.380 --> 00:19:28.130 That decision 356 00:19:28.130 --> 00:19:30.939 would be made by the barycentric coordinate 357 00:19:30.939 --> 00:19:35.699 If we just draw the pixels that satisfy the convex condition 358 00:19:35.699 --> 00:19:38.849 this is the actual implemented result 359 00:19:38.849 --> 00:19:41.649 For the triangle 360 00:19:41.649 --> 00:19:43.300 Or, two triangles are formed 361 00:19:43.300 --> 00:19:46.450 We get a resulting screen of drawing two triangles 362 00:19:46.450 --> 00:19:48.060 That's how we can put it 363 00:19:48.319 --> 00:19:51.903 Texture mapping 364 00:19:52.379 --> 00:19:55.729 I'll first talk about how to utilize 365 00:19:55.729 --> 00:19:59.030 the barycentric coordinate that we mentioned last time 366 00:19:59.030 --> 00:20:02.830 Using this barycentric coordinate, we can 367 00:20:02.830 --> 00:20:05.780 determine whether it's inside the triangle 368 00:20:05.780 --> 00:20:08.030 or outside the triangle 369 00:20:08.030 --> 00:20:12.380 Barycentric coordinate is used to determine 370 00:20:12.380 --> 00:20:15.317 simply whether it's inside or outside the triangle, but 371 00:20:15.317 --> 00:20:19.417 it also checks how much influence that pixel inside the triangle 372 00:20:19.417 --> 00:20:23.917 is receiving from each of the three points 373 00:20:23.917 --> 00:20:26.417 So barycentric coordinate is very useful 374 00:20:26.417 --> 00:20:29.317 for expressing the amount of influence 375 00:20:29.317 --> 00:20:33.117 For example, if we have these 3 coefficients 376 00:20:33.117 --> 00:20:35.117 if the first coefficient is 1 377 00:20:35.117 --> 00:20:37.455 the rest of the coefficients would be 0 378 00:20:37.455 --> 00:20:39.693 Then this is solely 379 00:20:39.693 --> 00:20:42.000 influenced by P1 380 00:20:42.000 --> 00:20:44.000 If these values have 1/3 each 381 00:20:44.000 --> 00:20:47.550 If they have the value of 0.3333 382 00:20:47.550 --> 00:20:52.238 then we can say that P1, P2, and P3 have uniform influence 383 00:20:52.238 --> 00:20:57.000 That's why we call it the barycentric coordinate 384 00:20:57.000 --> 00:21:03.517 Using this property of barycentric coordinate 385 00:21:03.517 --> 00:21:08.445 when we color the inside of the triangle 386 00:21:08.445 --> 00:21:11.000 we don't simply color them with a single color 387 00:21:11.000 --> 00:21:12.950 We receive influence from each point 388 00:21:12.950 --> 00:21:16.600 and have a linear effect 389 00:21:16.600 --> 00:21:20.000 That's the foundation we get 390 00:21:20.000 --> 00:21:25.550 As we explained about vertex array earlier 391 00:21:25.550 --> 00:21:27.050 In the vertex array, we 392 00:21:27.050 --> 00:21:30.000 only recorded the location of points 393 00:21:30.000 --> 00:21:32.300 but here, on top of the location information 394 00:21:32.300 --> 00:21:35.000 we give additional data 395 00:21:35.000 --> 00:21:37.350 We give additional data and 396 00:21:37.350 --> 00:21:39.693 do linear interpolation on the data 397 00:21:39.693 --> 00:21:43.515 and decorate the inside of the triangle in various ways 398 00:21:43.515 --> 00:21:47.478 Therefore, vertex 399 00:21:47.478 --> 00:21:51.778 goes beyond the concept of point in affine space 400 00:21:51.778 --> 00:21:54.828 It's a concept of point that 401 00:21:54.828 --> 00:21:57.436 manages the additional properties as well 402 00:21:57.436 --> 00:22:00.000 It's not an ordinary point 403 00:22:00.000 --> 00:22:03.750 If we're drawing a triangle 404 00:22:03.750 --> 00:22:10.208 let's say that we're setting the vertex coordinate and the color 405 00:22:10.208 --> 00:22:14.558 Then this point would have a location coordinate 406 00:22:14.558 --> 00:22:19.158 When we set a color coordinate for each point, like this 407 00:22:19.158 --> 00:22:23.558 let's color this form of triangle by 408 00:22:23.558 --> 00:22:25.822 doing linear interpolation on the inside 409 00:22:25.822 --> 00:22:28.522 Then when we do linear interpolation on the 410 00:22:28.522 --> 00:22:31.247 color of the vertex based on the barycentric coordinate 411 00:22:31.247 --> 00:22:34.997 then we can create this pattern 412 00:22:34.997 --> 00:22:39.921 where there's a rainbow gradation 413 00:22:39.921 --> 00:22:42.171 If we use these characteristics 414 00:22:42.171 --> 00:22:44.346 we can use it in a variety of effects 415 00:22:44.346 --> 00:22:47.496 One of the main ones is 416 00:22:47.496 --> 00:22:50.634 the topic of this lecture, texture mapping 417 00:22:50.634 --> 00:22:52.984 Texture mapping is 418 00:22:52.984 --> 00:22:54.784 bringing in an image and 419 00:22:54.784 --> 00:22:57.792 using that image to fill in the triangle 420 00:22:57.792 --> 00:23:00.392 It's a technique of using the color information of the image 421 00:23:00.392 --> 00:23:05.059 and applying it on the surface of the triangle 422 00:23:05.059 --> 00:23:10.059 When the images that we normally use 423 00:23:10.059 --> 00:23:12.564 get taken into game production 424 00:23:12.564 --> 00:23:16.713 it gets internally transformed into the form that can be used 425 00:23:16.713 --> 00:23:20.515 That transformed data is called texture 426 00:23:20.515 --> 00:23:22.443 For the triangle 427 00:23:22.443 --> 00:23:25.099 before rasterization takes place, it's simply 428 00:23:25.099 --> 00:23:28.337 a logical area formed of three vectors 429 00:23:28.337 --> 00:23:31.837 or three points 430 00:23:31.837 --> 00:23:36.037 Then it would be an area of image corresponding 431 00:23:36.037 --> 00:23:39.440 to this logical area 432 00:23:39.440 --> 00:23:44.140 But in order to utilize the images the same way 433 00:23:44.140 --> 00:23:49.390 this vector system has to be used the same way 434 00:23:49.390 --> 00:23:52.160 in the Cartesian coordinate system used by the triangle 435 00:23:52.160 --> 00:23:55.710 When we normally open images in Photoshop or other programs 436 00:23:55.710 --> 00:23:59.260 it's calculated as a pixel coordinate system that 437 00:23:59.260 --> 00:24:01.719 increases from (0, 0) to the bottom right hand corner 438 00:24:01.719 --> 00:24:05.669 Therefore, rather than using that coordinate 439 00:24:05.669 --> 00:24:09.799 we need to use the flat coordinate system that's based on real numbers 440 00:24:09.799 --> 00:24:14.989 Instead of the coordinate systems used in image programs 441 00:24:14.989 --> 00:24:17.439 the mathematical coordinate system 442 00:24:17.439 --> 00:24:21.160 or the Cartesian system, has to be used when expressing the image 443 00:24:21.160 --> 00:24:23.660 When we express it that way 444 00:24:23.660 --> 00:24:26.960 the horizontal and vertical range 445 00:24:26.960 --> 00:24:31.040 has to be limited to [0, 1] no matter what the resolution is 446 00:24:31.040 --> 00:24:33.740 when expressing the 2D coordinate 447 00:24:33.740 --> 00:24:37.140 And this is called a UV coordinate 448 00:24:37.140 --> 00:24:39.540 U refers to the horizontal 449 00:24:39.540 --> 00:24:42.400 and V refers to the vertical 450 00:24:42.400 --> 00:24:45.700 Using this UV coordinate 451 00:24:45.700 --> 00:24:49.450 In the process of expressing triangle on the screen 452 00:24:49.450 --> 00:24:54.160 the triangle will also go through rasterization in that step 453 00:24:54.160 --> 00:24:56.060 And then texture 454 00:24:56.060 --> 00:24:59.960 The texture, composed of UV coordinate, will also 455 00:24:59.960 --> 00:25:04.327 have to obtain the color 456 00:25:04.327 --> 00:25:07.802 from the texture corresponding to 457 00:25:07.802 --> 00:25:12.152 the rasterization of triangle 458 00:25:12.152 --> 00:25:14.752 In this perspective 459 00:25:14.752 --> 00:25:17.559 then how are we going to get that color? 460 00:25:17.559 --> 00:25:20.609 The original of the texture 461 00:25:20.609 --> 00:25:25.265 is axtually a collection of pixels composed of integers 462 00:25:25.265 --> 00:25:30.165 What we're expressing on the screen is pixel 463 00:25:30.165 --> 00:25:32.415 and the data of the original image 464 00:25:32.415 --> 00:25:34.171 composing the texture is also pixel 465 00:25:34.171 --> 00:25:37.968 Calling both of them pixel would be confusing 466 00:25:37.968 --> 00:25:40.418 So during the rendering process, these two 467 00:25:40.418 --> 00:25:43.368 are distinguished in separate terms 468 00:25:43.368 --> 00:25:48.368 The units forming up the texture image 469 00:25:48.368 --> 00:25:50.962 is called a texel 470 00:25:50.962 --> 00:25:53.812 And the final unit that shows on the monitor, or 471 00:25:53.812 --> 00:25:57.479 the screen coordinate system, is called a pixel 472 00:25:57.479 --> 00:26:01.029 Therefore, in order to choose the pixel, we 473 00:26:01.029 --> 00:26:03.329 bring in the data of texel 474 00:26:03.329 --> 00:26:10.138 and it's finally utilized to choose the pixel 475 00:26:10.138 --> 00:26:13.649 The pixel area to be drawn on the triangle 476 00:26:13.649 --> 00:26:16.249 and the texel area of the texture 477 00:26:16.249 --> 00:26:18.349 have different sizes 478 00:26:18.349 --> 00:26:22.160 Therefore, there are a few things to keep in mind 479 00:26:22.160 --> 00:26:24.260 while delivering the texel information to pixel 480 00:26:24.260 --> 00:26:27.199 We'll talk about those things now 481 00:26:27.199 --> 00:26:29.799 When the two are completely the same, then 482 00:26:29.799 --> 00:26:34.599 we just substitute the texel information into the pixel 483 00:26:34.599 --> 00:26:36.599 This is usually not the case 484 00:26:36.599 --> 00:26:39.349 First, if the texel is bigger than the pixel 485 00:26:39.349 --> 00:26:42.766 Let me explain what this is 486 00:26:42.766 --> 00:26:47.479 Let's say that we're drawing a very big triangle 487 00:26:47.479 --> 00:26:50.416 But the actual image 488 00:26:50.416 --> 00:26:51.886 is very small like this 489 00:26:51.886 --> 00:26:53.886 Then what should we do? 490 00:26:53.886 --> 00:26:57.336 In order to make this small image fill up the entire triangle 491 00:26:57.336 --> 00:26:59.559 we would have to expand the image 492 00:26:59.559 --> 00:27:02.609 This is when we're expanding it 493 00:27:02.609 --> 00:27:07.559 When expanding, these two methods are usually used 494 00:27:07.559 --> 00:27:13.259 When expanded, the UV coordinate 495 00:27:13.259 --> 00:27:15.783 Inside the expanded triangle, there are 496 00:27:15.783 --> 00:27:18.759 lots of pixels inside 497 00:27:18.759 --> 00:27:22.709 For the barycentric coordinate corresponding to the pixel 498 00:27:22.709 --> 00:27:25.859 the UV coordinate corresponding to that will be linearly calculated 499 00:27:25.859 --> 00:27:27.279 and be made 500 00:27:27.279 --> 00:27:31.129 There are lots of UV coordinates 501 00:27:31.129 --> 00:27:34.829 but the ones corresponding to this 502 00:27:34.829 --> 00:27:39.320 There actually aren't many texels in the original image 503 00:27:39.320 --> 00:27:42.270 So we're very short on numbers, then what should we do? 504 00:27:42.270 --> 00:27:44.820 Many pixels 505 00:27:44.820 --> 00:27:48.079 would be colored by a single texel 506 00:27:48.079 --> 00:27:54.629 Which texel does it take? The closest texel 507 00:27:54.629 --> 00:27:57.979 It brings in the image of the texel as-is 508 00:27:57.979 --> 00:28:01.720 From the final UV coordinate 509 00:28:01.720 --> 00:28:08.222 we bring in the color information of the nearest texel 510 00:28:08.222 --> 00:28:11.559 And this is called Nearest-neighbor interpolation 511 00:28:11.559 --> 00:28:16.359 It's simply a technique of finding the nearest pixel 512 00:28:16.359 --> 00:28:19.959 and bringing in the color 513 00:28:19.959 --> 00:28:24.009 Second, if we proceed like this 514 00:28:24.009 --> 00:28:28.109 the distribution of the color 515 00:28:28.109 --> 00:28:31.209 is distinct, it's either this color or that color 516 00:28:31.209 --> 00:28:36.640 Then we end up with a feel of chopped up pixel art 517 00:28:36.640 --> 00:28:41.944 But in the perspective of 3D, rather than 518 00:28:41.944 --> 00:28:44.794 expressing it as a pixel art 519 00:28:44.794 --> 00:28:48.944 making it become blurry when you approach closer 520 00:28:48.944 --> 00:28:51.880 would seem more realistic 521 00:28:51.880 --> 00:28:55.130 So rather than having discontinued colors 522 00:28:55.130 --> 00:29:01.440 it uses the UV coordinate of the calculated pixel as the standard 523 00:29:01.440 --> 00:29:05.340 and determine the 4 related texels 524 00:29:05.340 --> 00:29:09.519 It determines the color values of the texels 525 00:29:09.519 --> 00:29:12.969 By interpolating the four colors 526 00:29:12.969 --> 00:29:15.669 the final color is decided 527 00:29:15.669 --> 00:29:19.769 Then in texel, there were only two kinds of information but 528 00:29:19.769 --> 00:29:22.719 in the actual corresponding coordinate, the two will be interpolated 529 00:29:22.719 --> 00:29:25.000 to form a new color 530 00:29:25.000 --> 00:29:29.100 And that's called Bilinear-interpolation 531 00:29:29.100 --> 00:29:32.900 Bilinear-interpolation and Nearest-neighbor interpolation 532 00:29:32.900 --> 00:29:35.480 are the two commonly used methods 533 00:29:35.480 --> 00:29:38.380 When setting up the texel in game engine 534 00:29:38.380 --> 00:29:42.880 we usually go to Filter Mode in settings 535 00:29:42.880 --> 00:29:47.000 Filter Mode is where we can select it 536 00:29:47.000 --> 00:29:49.550 This is the screen of Unity Engine 537 00:29:49.550 --> 00:29:51.901 Right now, Trilinear method is chosen 538 00:29:51.901 --> 00:29:55.000 I'll explain about this method later 539 00:29:55.000 --> 00:29:58.450 If you use Unity or Unreal 540 00:29:58.450 --> 00:30:00.600 go to texture settings 541 00:30:00.600 --> 00:30:04.909 and check the option of Filter Mode 542 00:30:04.909 --> 00:30:08.409 After applying the Filter Mode 543 00:30:08.409 --> 00:30:13.359 we've now chosen the method to apply texel on the pixel 544 00:30:13.359 --> 00:30:16.309 Then there's a method of implementing this 545 00:30:16.309 --> 00:30:18.709 For implementation 546 00:30:18.709 --> 00:30:21.597 there's this entire image to be used in texture mapping 547 00:30:21.597 --> 00:30:24.597 We may use the entire image or 548 00:30:24.597 --> 00:30:27.147 we can also choose the UV coordinate of 549 00:30:27.147 --> 00:30:30.799 a certain area, and then bring it in 550 00:30:30.799 --> 00:30:33.564 For this example image 551 00:30:33.564 --> 00:30:38.064 we put the basic (0, 0) coordinate of UV on the lower left side 552 00:30:38.064 --> 00:30:41.599 And we set it so that it would increase to the right and upwards 553 00:30:41.599 --> 00:30:45.799 But let's say that I only want to bring in the face 554 00:30:45.799 --> 00:30:49.679 and do mapping on the triangle 555 00:30:49.679 --> 00:30:54.622 But on the area of the triangle 556 00:30:54.622 --> 00:30:57.727 when I map out the rectangular face on the triangle 557 00:30:57.727 --> 00:31:00.427 the UV coordinate of each vertex 558 00:31:00.427 --> 00:31:03.307 would just need to be matched as-is 559 00:31:03.307 --> 00:31:06.507 Then for this triangle 560 00:31:06.507 --> 00:31:08.657 there's a set vertex for each 561 00:31:08.657 --> 00:31:12.307 And with the locations, we write down the 562 00:31:12.307 --> 00:31:15.440 UV coordinates, with the values as-is 563 00:31:15.440 --> 00:31:17.990 We write it on the vertex buffer 564 00:31:17.990 --> 00:31:22.090 Then when we rasterize this, when we 565 00:31:22.090 --> 00:31:23.226 start the rendering 566 00:31:23.226 --> 00:31:25.960 as we draw each pixel 567 00:31:25.960 --> 00:31:29.110 the UV coordinate of the corresponding pixel 568 00:31:29.110 --> 00:31:31.460 can be calculated through interpolation 569 00:31:31.460 --> 00:31:35.260 Then we just need to bring in the pixel information 570 00:31:35.260 --> 00:31:38.559 corresponding to the texel 571 00:31:38.559 --> 00:31:42.259 When you use the Nearest-neighbor interpolation method 572 00:31:42.259 --> 00:31:43.450 as I've explained earlier 573 00:31:43.450 --> 00:31:46.599 these small images 574 00:31:46.599 --> 00:31:50.886 would just be expanded like pixel art 575 00:31:50.886 --> 00:31:54.253 There's no blurry interpolation in-between 576 00:31:54.253 --> 00:31:58.760 It just uses the nearest color as-is 577 00:31:58.760 --> 00:32:00.960 Therefore, it creates an enlargened result 578 00:32:00.960 --> 00:32:04.260 of the small image 579 00:32:04.260 --> 00:32:06.971 So usually when dot games are 580 00:32:06.971 --> 00:32:09.971 used in Unity, Unity doesn't call this Filter Mode 581 00:32:09.971 --> 00:32:11.320 as Nearest-neighbor 582 00:32:11.320 --> 00:32:13.324 It calls it "point" 583 00:32:13.324 --> 00:32:16.420 The Filter Mode called point 584 00:32:16.420 --> 00:32:20.629 is usually used when making 2D games 585 00:32:20.629 --> 00:32:23.077 The resulting screen from implementing that 586 00:32:23.077 --> 00:32:25.844 turns out like this 587 00:32:25.844 --> 00:32:27.894 The original image used here is very small 588 00:32:27.894 --> 00:32:30.919 The entire image is 64x64 589 00:32:30.919 --> 00:32:36.519 It's a very small image, and the face is even smaller 590 00:32:36.519 --> 00:32:42.019 It's a very small pixel, barely about 10 pixels 591 00:32:42.019 --> 00:32:45.469 But in a big face like this 592 00:32:45.469 --> 00:32:50.520 it went in almost uniformly 593 00:32:50.520 --> 00:32:52.720 With that, we learned about 594 00:32:52.720 --> 00:32:56.459 Nearest-neighbor interpolation among texture mapping 595 00:32:56.459 --> 00:33:01.759 This time, the case when the texel is smaller than the pixel 596 00:33:01.759 --> 00:33:04.559 In other words, we have a very big image 597 00:33:04.559 --> 00:33:07.409 We have an image with high resolution 598 00:33:07.409 --> 00:33:10.009 but the actual triangle that we'll draw is very small 599 00:33:10.009 --> 00:33:11.459 This is a method to process this 600 00:33:11.459 --> 00:33:14.000 in an efficient way 601 00:33:14.000 --> 00:33:16.250 It's the other way around 602 00:33:16.250 --> 00:33:18.850 If we choose a single pixel 603 00:33:18.850 --> 00:33:22.100 out of many pixels that we can choose from 604 00:33:22.100 --> 00:33:26.600 this can cause a smear effect 605 00:33:26.600 --> 00:33:29.500 or an aliasing effect 606 00:33:29.500 --> 00:33:31.840 And we would have a lot to calculate 607 00:33:31.840 --> 00:33:34.190 In this case, the shrunk image 608 00:33:34.190 --> 00:33:36.290 The shrunk image with good quality 609 00:33:36.290 --> 00:33:39.490 is made in multiple beforehand 610 00:33:39.490 --> 00:33:43.836 And as we go further, the shrunk image 611 00:33:43.836 --> 00:33:46.095 is used instead of the original image 612 00:33:46.095 --> 00:33:48.858 This method is used a lot in game implementation 613 00:33:48.858 --> 00:33:52.408 In order to use it like this 614 00:33:52.408 --> 00:33:56.508 we need to link the shrunk image and the original image 615 00:33:56.508 --> 00:33:58.600 and create a new image 616 00:33:58.600 --> 00:34:01.868 This is called Mipmap 617 00:34:06.760 --> 00:34:11.978 Mipmap can be set in the texture option 618 00:34:11.978 --> 00:34:15.879 We can decide whether to use the mipmap or not 619 00:34:15.879 --> 00:34:22.000 I can't see it in this option 620 00:34:22.000 --> 00:34:26.500 Oh, there are settings related to mipmap 621 00:34:26.500 --> 00:34:27.735 Generate Mip Maps 622 00:34:27.735 --> 00:34:31.235 So if I turn on this option, we are telling it to change 623 00:34:31.235 --> 00:34:35.119 the image I brought, by setting the mipmap 624 00:34:35.119 --> 00:34:38.569 The original image is a single image of a satellite 625 00:34:38.569 --> 00:34:41.880 When it gets changed into texture after being imported into game engine 626 00:34:41.880 --> 00:34:45.130 if we import it after checking off that option 627 00:34:45.130 --> 00:34:48.759 the game engine makes these images automatically 628 00:34:48.759 --> 00:34:52.956 Then the capacity of the image would increase 629 00:34:52.956 --> 00:34:55.440 It increases about 1/3 greater 630 00:34:55.440 --> 00:34:58.690 But when drawing an object that's far away 631 00:34:58.690 --> 00:35:02.190 we can draw it effectively, so even though the capacity increases 632 00:35:02.190 --> 00:35:07.400 the graphic processing becomes faster 633 00:35:07.400 --> 00:35:11.250 So when this object 634 00:35:11.250 --> 00:35:13.400 goes away from the camera by the set distance 635 00:35:13.400 --> 00:35:16.650 then among the texture created with mipmap 636 00:35:16.650 --> 00:35:19.106 we would use this 637 00:35:19.106 --> 00:35:22.206 And when it gets even further, we would use this 638 00:35:22.206 --> 00:35:24.606 In a way, mipmap is 639 00:35:24.606 --> 00:35:26.906 texture that goes further away 640 00:35:26.906 --> 00:35:28.156 based on the 3D distance 641 00:35:28.156 --> 00:35:30.599 Therefore, we can call it three-dimensional 642 00:35:30.599 --> 00:35:35.199 Based on the distance 643 00:35:35.199 --> 00:35:40.399 Based on the area of the object 644 00:35:40.399 --> 00:35:45.849 we select either Bilinear interpolation 645 00:35:45.849 --> 00:35:47.800 or Nearest-neighbor interpolation 646 00:35:47.800 --> 00:35:49.000 After that, there's one more thing that 647 00:35:49.000 --> 00:35:51.100 we can consider, based on the distance 648 00:35:51.100 --> 00:35:57.320 Area is important too, but if the distance is in the middle 649 00:35:57.320 --> 00:35:59.570 If it's in the middle of the distance used by this mipmap 650 00:35:59.570 --> 00:36:02.370 and the distance used by this mapmap 651 00:36:02.370 --> 00:36:07.020 then the these two mipmaps 652 00:36:07.020 --> 00:36:09.720 can interpolate the depth value for the selected location 653 00:36:09.720 --> 00:36:12.770 So interpolating this in 3D 654 00:36:12.770 --> 00:36:15.420 in a more complex interpolation 655 00:36:15.420 --> 00:36:20.287 is called a Trilinear interpolation 656 00:36:20.287 --> 00:36:24.587 Up until now, we 657 00:36:24.587 --> 00:36:26.574 only mentioned the objects that show 658 00:36:26.574 --> 00:36:28.837 their front view on the screen 659 00:36:28.837 --> 00:36:31.237 In a way, for texture mapping 660 00:36:31.237 --> 00:36:33.360 the technique is not the most important 661 00:36:33.360 --> 00:36:38.136 It's important that we express an object realistically 662 00:36:38.136 --> 00:36:40.636 with the textures 663 00:36:40.636 --> 00:36:45.479 So there are different interpolation methods based on the area 664 00:36:45.479 --> 00:36:49.479 but there are a few exceptions to these methods 665 00:36:49.479 --> 00:36:51.579 One of the main ones is when the camera is here 666 00:36:51.579 --> 00:36:57.639 and the object is placed in a slanted way 667 00:36:57.639 --> 00:37:01.327 For those cases, even the trilinear methods 668 00:37:01.327 --> 00:37:03.739 make it look blurry 669 00:37:03.739 --> 00:37:05.689 In order to solve this problem 670 00:37:05.689 --> 00:37:09.639 there's a technique that creates 671 00:37:09.639 --> 00:37:11.960 and provides a separate image 672 00:37:11.960 --> 00:37:15.517 that's optimized for the slanted angle 673 00:37:15.517 --> 00:37:17.992 This is called 674 00:37:17.992 --> 00:37:20.892 Anisotropic filtering 675 00:37:20.892 --> 00:37:23.006 Let's call it anisotropic 676 00:37:25.968 --> 00:37:28.668 It's called an anisotropic filtering 677 00:37:28.668 --> 00:37:33.568 These example images for every angle 678 00:37:33.568 --> 00:37:35.818 are prepared beforehand 679 00:37:35.818 --> 00:37:38.080 and it switches between these 680 00:37:38.080 --> 00:37:40.380 based on the angle 681 00:37:40.380 --> 00:37:43.461 As explained earlier, in the case of Trilinear 682 00:37:43.461 --> 00:37:46.211 these slanted areas 683 00:37:46.211 --> 00:37:48.559 look blurry like this 684 00:37:48.559 --> 00:37:51.646 But in the case of anisotropic filtering 685 00:37:51.646 --> 00:37:53.996 it created good image sources after considering this 686 00:37:53.996 --> 00:37:57.496 Therefore, when it's expressed with these images, it gets expressed 687 00:37:57.496 --> 00:37:59.639 in a clean way 688 00:37:59.639 --> 00:38:02.739 With that, we learned about the mechanism of texture mapping 689 00:38:02.739 --> 00:38:05.778 and various parts to consider 690 00:38:05.778 --> 00:38:09.279 when proceeding with texture mapping 691 00:38:09.279 --> 00:38:13.579 With that, we have formed the foundation 692 00:38:13.579 --> 00:38:16.479 for creating a realistic game 693 00:38:16.479 --> 00:38:18.600 using basic texture mapping 694 00:38:18.600 --> 00:38:20.800 That's all for today's lecture 695 00:38:20.800 --> 00:38:22.600 Great job for listening to the lesson 696 00:38:22.600 --> 00:38:23.455 Thank you 697 00:38:24.077 --> 00:38:25.059 Triangle Affine combination of three sides P'=s·P1+t·P2+(1-s-t)·P3 Combination of 3 points can create all the points on the same plane 698 00:38:25.059 --> 00:38:25.962 Convex combination: When all the coefficients of affine combination is between 0 and 1 0≤c_i≤1 Convex: When the line drawn between two points is... 699 00:38:25.962 --> 00:38:26.915 Concave: When the line drawn between two points goes outside the area Tetrahedron formed with convex combination of four points 700 00:38:26.915 --> 00:38:27.901 Mesh structure Mesh structure: Data containing vertex information and triangle information 701 00:38:27.901 --> 00:38:28.869 Triangle List method is usually used, where vertex and triangle information are separately placed Wire frame: screen that expresses mesh by drawing... 702 00:38:28.869 --> 00:38:30.669 Barycentric coordinate Coefficient used in combination of 3 points s, t, (1-s-t) Calculation expression of barycentric coordinate 703 00:38:30.669 --> 00:38:32.269 t=[(w·u)(u·v)-(w·v)(u·u)] / [(u·v)^2-(v·v)(u·u)] s=[(w·v)(u·v)-(w·u)(v·v)] / [(u·v)^2-(v·v)(u·u)] 704 00:38:32.269 --> 00:38:33.901 Barycentric coordinate value decides the pixel coloring 705 00:38:33.901 --> 00:38:36.401 Texture mapping Utilizing barycentric coordinate Linear interpolation of vertex color based on the barycentric coordinate can decorate the triangle 706 00:38:36.401 --> 00:38:38.881 Texture mapping Texture: image data converted into the form needed in game production Texture mapping: technique used to fill up triangle with image 707 00:38:38.881 --> 00:38:39.722 Things to consider when delivering texel information to pixel When texel and pixel is uniform, substitute as-is 708 00:38:39.722 --> 00:38:40.571 When texel is bigger than pixel Image expansion Nearest-neighbor interpolation: using the color information of the closest texel on the UV coordinate 709 00:38:40.571 --> 00:38:41.381 Bilinear-interpolation: determining 4 related texels on the UV coordinate and deciding the final color through interpolation 710 00:38:41.381 --> 00:38:42.181 When texel is bigger than pixel Image shrinkage Mipmap can be used to process the graphics of far-away objects quickly 711 00:38:42.181 --> 00:38:43.031 Trilinear interpolation: calculating through 3D interpolation based on the area and distance 712 00:38:43.031 --> 00:38:43.847 When triangle is placed slanted on the camera Anisotropic filtering: create and provide separate images that are optimized for the slanted angle