﻿1 00:00:00,621 --> 00:00:03,043 - In this segment, we're going to go into detail 2 00:00:03,043 --> 00:00:06,007 about Gouraud and Phong shading. 3 00:00:06,007 --> 00:00:07,834 Let's first talk about Gouraud shading, 4 00:00:07,834 --> 00:00:10,418 which is the standard smooth shading. 5 00:00:10,418 --> 00:00:12,732 Note also that this is a lecture 6 00:00:12,732 --> 00:00:14,880 that actually talks about the operations 7 00:00:14,880 --> 00:00:17,502 that happen in rasterization. 8 00:00:17,502 --> 00:00:19,832 In a standard vertex or pixel shader, 9 00:00:19,832 --> 00:00:21,788 you would just give the colors 10 00:00:21,788 --> 00:00:24,103 for I_1, I_2, and I_3, 11 00:00:24,103 --> 00:00:25,395 and after you've done that, 12 00:00:25,395 --> 00:00:27,325 you would expect the rasterization hardware 13 00:00:27,325 --> 00:00:29,738 in OpenGL to do the interpolation. 14 00:00:29,738 --> 00:00:31,196 So you don't need to worry about 15 00:00:31,196 --> 00:00:33,807 the details of this for Gouraud shading. 16 00:00:33,807 --> 00:00:37,143 However, we are interested in learning, for this course, 17 00:00:37,143 --> 00:00:39,961 what actually goes on under the hood. 18 00:00:39,961 --> 00:00:42,844 So here we have three vertices, 19 00:00:42,844 --> 00:00:44,453 I_1, I_2, I_3, 20 00:00:44,453 --> 00:00:46,847 and those correspond to the colors here, 21 00:00:46,847 --> 00:00:49,389 so we assume I_1 is the color of vertex 1, 22 00:00:49,389 --> 00:00:50,785 I_2 is the color of vertex 2, 23 00:00:50,785 --> 00:00:52,805 I_3 is the color of vertex 3. 24 00:00:52,805 --> 00:00:55,669 Notice that the vertical extent 25 00:00:55,669 --> 00:00:58,336 goes from y_1, all the way to y_3. 26 00:00:59,292 --> 00:01:01,184 So we want to find first, the, 27 00:01:01,184 --> 00:01:02,367 to find the color of I_p, 28 00:01:02,367 --> 00:01:05,500 we first want to find the colors at I_a and I_b, 29 00:01:05,500 --> 00:01:07,902 and then we want to interpolate them. 30 00:01:07,902 --> 00:01:11,469 So let's first talk about the color at I_a. 31 00:01:11,469 --> 00:01:14,012 I_a lies between I_1 and I_2, 32 00:01:14,012 --> 00:01:15,591 so if you want to do the interpolation, 33 00:01:15,591 --> 00:01:18,349 we do it along the vertical direction. 34 00:01:18,349 --> 00:01:20,634 Look at the length of this region, 35 00:01:20,634 --> 00:01:22,641 and the length of this region. 36 00:01:22,641 --> 00:01:27,006 So the length of this region is y_1 minus y_s. 37 00:01:27,006 --> 00:01:28,256 The length here 38 00:01:29,125 --> 00:01:30,375 is y_s minus y_2. 39 00:01:32,226 --> 00:01:36,020 The total length, of course, is y_1 minus y_2. 40 00:01:36,020 --> 00:01:37,283 Now it's just a question 41 00:01:37,283 --> 00:01:40,480 of doing the standard interpolation formula. 42 00:01:40,480 --> 00:01:44,298 Which will mean that I_1, because it's further away from I_1, 43 00:01:44,298 --> 00:01:48,087 it will be multiplied by the smaller quantity. 44 00:01:48,087 --> 00:01:49,754 So this will get I_1, 45 00:01:51,208 --> 00:01:54,125 and this quantity will multiply I_2. 46 00:01:56,250 --> 00:01:58,114 Indeed, that's the formula here: 47 00:01:58,114 --> 00:01:59,864 I_1 times (y_s minus y_2), 48 00:02:01,161 --> 00:02:03,328 plus I_2 times (y_1 minus y_s). 49 00:02:04,969 --> 00:02:07,869 And divide the whole thing by the total length here, 50 00:02:07,869 --> 00:02:10,403 which is y_1 minus y_2. 51 00:02:10,403 --> 00:02:13,140 That's the formula for I_a. 52 00:02:13,140 --> 00:02:15,562 We can similarly get a formula for I_b, 53 00:02:15,562 --> 00:02:17,108 which will be equal to: 54 00:02:17,108 --> 00:02:19,108 I_1, times, in this case, 55 00:02:19,976 --> 00:02:20,976 (y_s minus y_3), 56 00:02:22,674 --> 00:02:24,757 and I_3 times (y_1 minus y_s), 57 00:02:25,953 --> 00:02:29,422 and now you normalize by y_1 minus y_3. 58 00:02:29,422 --> 00:02:32,284 Once you have the formulae for I_a and I_b, 59 00:02:32,284 --> 00:02:34,762 the question is, what do you get for I_p? 60 00:02:34,762 --> 00:02:36,381 And in order to consider that, 61 00:02:36,381 --> 00:02:39,188 one needs to consider the X-coordinates, 62 00:02:39,188 --> 00:02:42,833 because one is interpolating within a scan line. 63 00:02:42,833 --> 00:02:46,500 So we can consider this as being the x of a (x_a), 64 00:02:47,881 --> 00:02:51,298 and we can consider this as being x of b (x_b). 65 00:02:52,927 --> 00:02:55,677 Here, of course, you have x of p (x_p). 66 00:02:57,407 --> 00:03:00,572 So the interpolation idea is the same. 67 00:03:00,572 --> 00:03:04,654 You have this length, which is x_p minus x_a, 68 00:03:04,654 --> 00:03:08,424 and you have this length, which is x_b minus x_p. 69 00:03:08,424 --> 00:03:12,442 So I_a will be multiplied by (x_b minus x_p), 70 00:03:12,442 --> 00:03:16,165 and I_b will be multiplied by (x_p minus x_a). 71 00:03:16,165 --> 00:03:17,802 Indeed, this is what happens here. 72 00:03:17,802 --> 00:03:21,250 So you have I_a times (x_b minus x_p), 73 00:03:21,250 --> 00:03:25,468 plus I_b, which is multiplied by (x_p minus x_a). 74 00:03:25,468 --> 00:03:28,305 And again, you normalize by x_b minus x_a. 75 00:03:28,305 --> 00:03:31,725 So it's just interpolation first in the vertical direction, 76 00:03:31,725 --> 00:03:34,318 in order to get the locations 77 00:03:34,318 --> 00:03:37,470 for the end points of the scan line, 78 00:03:37,470 --> 00:03:41,139 and then interpolation along the scan line to get the, 79 00:03:41,139 --> 00:03:44,849 horizontally to get the final color of I_p. 80 00:03:44,849 --> 00:03:47,679 The actual implementation of this is much more efficient 81 00:03:47,679 --> 00:03:50,116 than the formulae will let you believe. 82 00:03:50,116 --> 00:03:51,897 For example, I can pre-compute 83 00:03:51,897 --> 00:03:54,306 the division by y_1 minus y_2, 84 00:03:54,306 --> 00:03:56,023 I can find the reciprocal of that, 85 00:03:56,023 --> 00:03:58,906 y_1 minus y_3, x_b minus x_a, 86 00:03:58,906 --> 00:03:59,746 and moreover, you see, 87 00:03:59,746 --> 00:04:02,090 as you go from one scan line to the next, 88 00:04:02,090 --> 00:04:05,283 the multiplicative factors, they reduce to addition. 89 00:04:05,283 --> 00:04:07,228 And therefore they are very efficient algorithms, 90 00:04:07,228 --> 00:04:08,528 that, in fact, don't involve 91 00:04:08,528 --> 00:04:10,329 multiplication or division at all, 92 00:04:10,329 --> 00:04:12,506 they just incrementally add quantities 93 00:04:12,506 --> 00:04:15,409 as you go from one scan line to the next. 94 00:04:15,409 --> 00:04:16,242 And this is a process 95 00:04:16,242 --> 00:04:18,916 which is generally known as scan conversion, 96 00:04:18,916 --> 00:04:21,479 but it also does the interpolation 97 00:04:21,479 --> 00:04:24,065 which is needed for Gouraud shading. 98 00:04:24,065 --> 00:04:26,224 Errors, we've already talked about those 99 00:04:26,224 --> 00:04:27,781 in the previous segment. 100 00:04:27,781 --> 00:04:30,665 So here is an extreme case, 101 00:04:30,665 --> 00:04:33,214 where I_1 and I_2 are zero, 102 00:04:33,214 --> 00:04:36,227 because either the light is pointing backwards, 103 00:04:36,227 --> 00:04:38,743 or the eye does not see the point. 104 00:04:38,743 --> 00:04:41,431 And now you have zeros in both cases, 105 00:04:41,431 --> 00:04:43,606 and you want to interpolate to make a highlight. 106 00:04:43,606 --> 00:04:45,241 Of course, that's not going to happen. 107 00:04:45,241 --> 00:04:46,769 If you have zero at the two vertices, 108 00:04:46,769 --> 00:04:49,112 the interpolation is also zero. 109 00:04:49,112 --> 00:04:52,520 And so Gouraud can have problems. 110 00:04:52,520 --> 00:04:54,687 Moreover, the way we implemented it, 111 00:04:54,687 --> 00:04:57,285 where we went vertically and then horizontally, 112 00:04:57,285 --> 00:05:00,148 means the shading is not rotationally-invariant. 113 00:05:00,148 --> 00:05:01,991 So if you were to rotate a point, 114 00:05:01,991 --> 00:05:04,516 you would actually see the shading change. 115 00:05:04,516 --> 00:05:07,528 For all of these reasons, Gouraud shading is useful 116 00:05:07,528 --> 00:05:10,658 only when you have relatively smooth shading effects, 117 00:05:10,658 --> 00:05:12,653 mostly for diffuse shading. 118 00:05:12,653 --> 00:05:14,972 But prior to the advent of fragment Shaders, 119 00:05:14,972 --> 00:05:16,897 you also needed to use Gouraud shading 120 00:05:16,897 --> 00:05:18,570 for specular highlights. 121 00:05:18,570 --> 00:05:21,489 And the way you handled that was by tessellating, 122 00:05:21,489 --> 00:05:24,149 or breaking the model into enough triangles, 123 00:05:24,149 --> 00:05:26,581 that, relative to the size of the triangles, 124 00:05:26,581 --> 00:05:28,796 the shading was still smooth. 125 00:05:28,796 --> 00:05:31,518 Next, we consider the Phong Illumnation Model, 126 00:05:31,518 --> 00:05:33,286 which is really the motivation also 127 00:05:33,286 --> 00:05:35,150 for the use of Phong shading, 128 00:05:35,150 --> 00:05:37,688 and the use of fragment shaders. 129 00:05:37,688 --> 00:05:40,723 And this corresponds to a specular or glossy material, 130 00:05:40,723 --> 00:05:42,628 where you have highlights. 131 00:05:42,628 --> 00:05:44,782 At the bottom I've just shown some renderings 132 00:05:44,782 --> 00:05:46,584 I made many years ago, 133 00:05:46,584 --> 00:05:49,386 where you've taken a lighting environment 134 00:05:49,386 --> 00:05:51,665 or a light probe that was acquired at Berkeley 135 00:05:51,665 --> 00:05:52,886 by Paul Debevec. 136 00:05:52,886 --> 00:05:55,571 It's in the Grace Cathedral in San Francisco. 137 00:05:55,571 --> 00:05:57,563 And I've rendered images 138 00:05:57,563 --> 00:06:00,364 with many different roughness settings, 139 00:06:00,364 --> 00:06:02,001 and you see from left to right, 140 00:06:02,001 --> 00:06:03,913 it starts off being a mirror, 141 00:06:03,913 --> 00:06:05,328 then it gets blurred out, 142 00:06:05,328 --> 00:06:06,630 and eventually in the right, 143 00:06:06,630 --> 00:06:09,267 it almost looks like a diffuse surface. 144 00:06:09,267 --> 00:06:11,346 And that, the amount of roughness, 145 00:06:11,346 --> 00:06:13,340 controls the width of the highlights, 146 00:06:13,340 --> 00:06:16,887 and your perception of how shiny the object is. 147 00:06:16,887 --> 00:06:19,343 Examples of specular or glossy materials 148 00:06:19,343 --> 00:06:23,260 are polished floors, glossy paint, whiteboards. 149 00:06:24,409 --> 00:06:26,952 Furthermore, highlights behave somewhat differently 150 00:06:26,952 --> 00:06:29,320 from plastics or dielectric materials 151 00:06:29,320 --> 00:06:30,954 as opposed to metals. 152 00:06:30,954 --> 00:06:32,787 So on plastics, the highlight 153 00:06:32,787 --> 00:06:34,126 is the color of the light source, 154 00:06:34,126 --> 00:06:36,081 not the body color of the object. 155 00:06:36,081 --> 00:06:37,589 And this is a very common thing, 156 00:06:37,589 --> 00:06:38,860 you could have a green ball, 157 00:06:38,860 --> 00:06:40,975 and you look at the highlight, it's still white, 158 00:06:40,975 --> 00:06:43,045 because the light source is white. 159 00:06:43,045 --> 00:06:44,343 Metals, on the other hand, 160 00:06:44,343 --> 00:06:46,514 the highlight depends on the surface color, 161 00:06:46,514 --> 00:06:48,650 and is modulated by the surface color. 162 00:06:48,650 --> 00:06:49,545 We don't have time 163 00:06:49,545 --> 00:06:52,921 to go into the physics of all of these effects; 164 00:06:52,921 --> 00:06:55,505 hopefully that's something you can look up, 165 00:06:55,505 --> 00:06:57,773 or we can cover in a future course. 166 00:06:57,773 --> 00:06:59,439 But these are basic properties 167 00:06:59,439 --> 00:07:02,174 of illumination and highlights, 168 00:07:02,174 --> 00:07:04,793 and it's also possible to regard them, really, 169 00:07:04,793 --> 00:07:07,117 as blurred reflections of the light source. 170 00:07:07,117 --> 00:07:08,605 If you look in the bottom panel, 171 00:07:08,605 --> 00:07:10,207 you can consider that the light source 172 00:07:10,207 --> 00:07:14,079 is just being blurred out as you go from left to right. 173 00:07:14,079 --> 00:07:16,997 So Phong illumination, coupled with Phong shading, 174 00:07:16,997 --> 00:07:19,460 is the appropriate way to make highlights. 175 00:07:19,460 --> 00:07:22,666 And again, it's worth noting the distinction between these. 176 00:07:22,666 --> 00:07:24,264 They're commonly used together, 177 00:07:24,264 --> 00:07:27,178 but technically, they're different aspects. 178 00:07:27,178 --> 00:07:29,273 The idea of Phong shading 179 00:07:29,273 --> 00:07:32,693 is simply that instead of interpolating the colors, 180 00:07:32,693 --> 00:07:36,614 what one actually does is interpolate the normals. 181 00:07:36,614 --> 00:07:38,971 So here we have the color was zero, 182 00:07:38,971 --> 00:07:42,191 but there's a correct normal in both of these locations. 183 00:07:42,191 --> 00:07:43,661 You interpolate the normal, 184 00:07:43,661 --> 00:07:46,015 and so you get the correct normal at the center, 185 00:07:46,015 --> 00:07:48,781 and therefore you can evaluate the illumination model 186 00:07:48,781 --> 00:07:50,389 and get a highlight. 187 00:07:50,389 --> 00:07:52,453 So the entire lighting calculation 188 00:07:52,453 --> 00:07:54,736 is performed for each pixel. 189 00:07:54,736 --> 00:07:57,651 In old style OpenGL, there was no Phong shading, 190 00:07:57,651 --> 00:07:59,393 it was just Gouraud shading, 191 00:07:59,393 --> 00:08:01,001 and therefore you would have to 192 00:08:01,001 --> 00:08:03,980 break this geometry up into enough triangles 193 00:08:03,980 --> 00:08:07,001 that it did actually compute the shading at each vertex. 194 00:08:07,001 --> 00:08:09,242 But in modern OpenGL and homework 2, 195 00:08:09,242 --> 00:08:11,028 you just write a fragment shader, 196 00:08:11,028 --> 00:08:14,879 and in this way, you can do perfect Phong shading. 197 00:08:14,879 --> 00:08:17,962 Let us now look at the vertex shader. 198 00:08:18,840 --> 00:08:20,566 Remember that this vertex shader 199 00:08:20,566 --> 00:08:24,022 comes from the mytest3 suite of programs. 200 00:08:24,022 --> 00:08:26,005 I encourage you to look at the code 201 00:08:26,005 --> 00:08:28,680 for these programs and the shaders, 202 00:08:28,680 --> 00:08:32,774 to get an idea of what you can do in OpenGL. 203 00:08:32,774 --> 00:08:35,524 First line says version 330 core, 204 00:08:36,390 --> 00:08:39,331 which just tells OpenGL that this shader 205 00:08:39,331 --> 00:08:40,914 is using GLSL 3.30, 206 00:08:41,857 --> 00:08:45,218 which is what we're using in our course. 207 00:08:45,218 --> 00:08:47,663 Let's now come to the per-vertex 208 00:08:47,663 --> 00:08:49,723 inputs to the shader. 209 00:08:49,723 --> 00:08:53,943 They're in location 0, location 1, and location 2. 210 00:08:53,943 --> 00:08:57,253 The layout command says which location are they in. 211 00:08:57,253 --> 00:08:59,566 in just says they're inputs, 212 00:08:59,566 --> 00:09:02,843 and vec3 says what kind of information is there. 213 00:09:02,843 --> 00:09:06,097 In this case, the position is the x, y and z coordinates, 214 00:09:06,097 --> 00:09:07,437 which is a three-vector. 215 00:09:07,437 --> 00:09:10,456 The normals, similarly, is the x, y, and z coordinates, 216 00:09:10,456 --> 00:09:12,768 it's a three-vector. 217 00:09:12,768 --> 00:09:16,850 The texture coordinates input are just two variables 218 00:09:16,850 --> 00:09:20,100 which are typically denoted as s and t. 219 00:09:20,940 --> 00:09:24,798 The outputs are the extra outputs from the vertex shader, 220 00:09:24,798 --> 00:09:27,221 which will be interpolated or rasterized, 221 00:09:27,221 --> 00:09:29,351 and sent to the fragment Shader. 222 00:09:29,351 --> 00:09:33,102 These correspond to myvertex for lighting calculations; 223 00:09:33,102 --> 00:09:35,799 mynormal, again, for the surface normals 224 00:09:35,799 --> 00:09:38,511 in the fragment shader for lighting calculations; 225 00:09:38,511 --> 00:09:40,483 and the texture coordinates, 226 00:09:40,483 --> 00:09:44,316 which will be provided to the fragment shader. 227 00:09:46,605 --> 00:09:49,167 Let's look in more detail at the shader. 228 00:09:49,167 --> 00:09:51,738 Again, we have the version 330 core. 229 00:09:51,738 --> 00:09:54,270 This was all the code we saw earlier. 230 00:09:54,270 --> 00:09:56,099 The uniform variables 231 00:09:56,099 --> 00:09:59,161 are variables that are the same for all vertices. 232 00:09:59,161 --> 00:10:01,520 In this case, they are the projection matrix 233 00:10:01,520 --> 00:10:04,889 and the modelview matrix. 234 00:10:04,889 --> 00:10:07,917 Both projection and modelview matrices 235 00:10:07,917 --> 00:10:10,108 are 4x4 matrices, 236 00:10:10,108 --> 00:10:13,866 which are specified with the command uniform mat4. 237 00:10:13,866 --> 00:10:15,788 istex simply says: 238 00:10:15,788 --> 00:10:18,804 are we doing texturing, or are we not? 239 00:10:18,804 --> 00:10:21,035 It's just a flag. 240 00:10:21,035 --> 00:10:21,868 The main routine 241 00:10:21,868 --> 00:10:25,623 is where the vertex shader is actually executed. 242 00:10:25,623 --> 00:10:27,832 gl_Position is a defined variable 243 00:10:27,832 --> 00:10:31,533 which sets the position within OpenGL 244 00:10:31,533 --> 00:10:33,267 for rasterization, 245 00:10:33,267 --> 00:10:36,891 which says where the vertex should go on the screen. 246 00:10:36,891 --> 00:10:38,211 As is conventional, 247 00:10:38,211 --> 00:10:39,735 the vertex location will be given 248 00:10:39,735 --> 00:10:42,007 by multiplying by the modelview matrix 249 00:10:42,007 --> 00:10:43,479 and the projection matrix; 250 00:10:43,479 --> 00:10:44,722 in fact, by the product 251 00:10:44,722 --> 00:10:47,652 of the projection and modelview matrices. 252 00:10:47,652 --> 00:10:49,577 Notice that we are now doing things 253 00:10:49,577 --> 00:10:51,236 in homogeneous coordinates, 254 00:10:51,236 --> 00:10:53,585 and therefore, we have to define a vec4, 255 00:10:53,585 --> 00:10:56,234 taking the x, y, z coordinates of the position, 256 00:10:56,234 --> 00:10:59,067 and the w-coordinate equal to 1. 257 00:11:00,448 --> 00:11:02,763 We also define the normal, 258 00:11:02,763 --> 00:11:05,603 which will be used in the fragment shader. 259 00:11:05,603 --> 00:11:08,612 This simply applies the normal transformation. 260 00:11:08,612 --> 00:11:10,589 Note that the normal transformation 261 00:11:10,589 --> 00:11:14,387 is given by the inverse transpose of the modelview matrix, 262 00:11:14,387 --> 00:11:17,788 which is why we are doing transpose inverse modelview, 263 00:11:17,788 --> 00:11:19,205 times the normal. 264 00:11:20,359 --> 00:11:24,977 We define the vertex location in eye coordinates, 265 00:11:24,977 --> 00:11:26,821 in the 3D world. 266 00:11:26,821 --> 00:11:28,526 This is different from gl_Position, 267 00:11:28,526 --> 00:11:30,738 which applies the projection matrix 268 00:11:30,738 --> 00:11:33,759 and tells you where it goes in the screen 269 00:11:33,759 --> 00:11:35,704 or in normalized device coordinates. 270 00:11:35,704 --> 00:11:39,104 However, we also need the value in eye coordinates 271 00:11:39,104 --> 00:11:40,459 in the 3D world, 272 00:11:40,459 --> 00:11:44,388 for later shading calculations in the Fragment Shader. 273 00:11:44,388 --> 00:11:47,613 That is done by multiplying the modelview matrix 274 00:11:47,613 --> 00:11:49,370 times the position, 275 00:11:49,370 --> 00:11:53,856 again, in homogeneous coordinates we made into vec4. 276 00:11:53,856 --> 00:11:57,226 Finally, we come to the texture coordinates. 277 00:11:57,226 --> 00:11:58,598 To avoid errors, 278 00:11:58,598 --> 00:12:02,073 I initially set the texture coordinate to (0,0), 279 00:12:02,073 --> 00:12:05,715 which is just the default value to prevent errors. 280 00:12:05,715 --> 00:12:10,176 In the next step, if texturing is turned on, 281 00:12:10,176 --> 00:12:12,299 then I have texture coordinates 282 00:12:12,299 --> 00:12:14,749 that were input to the vertex shader, 283 00:12:14,749 --> 00:12:18,049 and I just set texcoord equal to that. 284 00:12:18,049 --> 00:12:19,286 These texture coordinates 285 00:12:19,286 --> 00:12:22,249 will then be interpolated and rasterized, 286 00:12:22,249 --> 00:12:25,037 and they will be passed on to the fragment shader 287 00:12:25,037 --> 00:12:26,854 for texturing. 288 00:12:26,854 --> 00:12:28,640 The next thing we're going to talk about 289 00:12:28,640 --> 00:12:31,607 is the type of different lighting and materials. 290 00:12:31,607 --> 00:12:33,582 Lights: points and directional, 291 00:12:33,582 --> 00:12:37,223 and shading: ambient, diffuse, emissive, and specular.