📗 Vertex shader:
➭ Compute lighting at every vertex (per vertex lighting).
➭ Interpolate colors across triangle (Gouraud shading).
➭ Fast, but not used in practice.
📗 Fragment shader:
➭ Interpolate normals and surface colors.
➭ Compute lighting at every pixel (per pixel lighting).
➭ Fast enough, used in practice.
📗 Color of a vertex or a pixel is the weighted sum of:
➭ Emissive (object produces light): \(c_{e}\).
➭ Ambient light: \(c_{a} \cdot l_{a}\).
➭ (Sum over all light sources) diffuse light: \(\left(\hat{N} \cdot \hat{L}\right) \cdot c_{l} \cdot c_{d}\).
➭ (Sum over all light sources) specular light: \(\left(\hat{E} \cdot \hat{R}\right)^{p} \cdot c_{l} \cdot c_{s}\).
📗 List of color notations:
➭ \(c_{e}\): emissive color (property of surface).
➭ \(c_{a}\): ambient color (property of light).
➭ \(c_{l}\): light color (property of light).
➭ \(c_{d}\): diffuse color (property of surface).
➭ \(c_{s}\): specular color (property of surface).
➭ \(p\): Phong exponent or shininess (property of surface).
📗 Color of a vertex or a pixel is the weighted sum of:
➭ Emissive (object produces light): \(c_{e}\).
➭ Ambient light: \(c_{a} \cdot l_{a}\).
➭ (Sum over all light sources) diffuse light: \(\left(\hat{N} \cdot \hat{L}\right) \cdot c_{l} \cdot c_{d}\).
➭ (Sum over all light sources) specular light: \(\left(\hat{E} \cdot \hat{R}\right)^{p} \cdot c_{l} \cdot c_{s}\).
📗 List of vector notations:
➭ \(\hat{N}\): unit normal vector (perpendicular to the surface or fake normal).
➭ \(\hat{L}\): unit direction of light.
➭ \(\hat{E}\): unit direction of eye (or camera).
➭ \(\hat{R}\): unit direction of the perfect mirror reflection of the light (or \(2 \left(\hat{L} \cdot \hat{N}\right) \hat{N} - \hat{L}\)).
📗 Note: another way to write \(\hat{E} \cdot \hat{R}\) is \(\hat{N} \cdot \hat{H}\) (in Professor Gleicher's lecture and workbooks), where \(\hat{H}\) is the half-way vector between light direction and eye direction.
📗 \(\hat{N} \cdot \hat{L} = \left\|\hat{N}\right\| \left\|\hat{L}\right\| \cos\left(\theta\right) = \cos\left(\theta\right)\) since \(\hat{N}, \hat{L}\) are unit vectors, where \(\theta\) is the angle between vectors \(\hat{N}, \hat{L}\).
📗 Lambert's cosine law says observed light intensity is proportional to cosine of the angle between the light direction and surface normal. Therefore, diffuse light intensity is \(\cos\left(\theta\right) = \hat{N} \cdot \hat{L}\): Link.
📗 \(\left(\hat{N} \cdot \hat{L}\right) \hat{N} = \dfrac{\hat{N} \cdot \hat{L}}{\hat{N} \cdot \hat{N}} \hat{N} = proj_{\hat{N}} \hat{L}\) since \(\hat{N}\) is a unit vector, is the projection of \(\hat{L}\) onto \(\hat{N}\).
📗 Then, to compute the reflection: \(R = \left(\hat{N} \cdot \hat{L}\right) \hat{N} + \left(\left(\hat{N} \cdot \hat{L}\right) \hat{N} - \hat{L}\right) = 2 \left(\hat{N} \cdot \hat{L}\right) \hat{N} - \hat{L}\).
📗 Phong model approximate the light intensity by some power of the cosine of the angle between the reflected light and the camera (eye) position, which is \(\cos\left(\theta\right)^{p} = \left(\hat{R} \cdot \hat{E}\right)^{p}\), and the power \(p\) is called the Phong coefficient or shininess coefficient: Link.
📗 Get position and normal from attribute and copy them to varying in the vertex shader (transform them into the camera space modelViewMatrix * position and normalMatrix * normal).
📗 Use interpolated varying position p and normal n in the fragment shader.
📗 Light position l and colors are uniform variables in the fragment shader.
📗 Given these variables:
➭ \(\hat{N}\) is N = normalize(n) (need to normalize again after interpolation).
➭ \(\hat{L}\) is L = normalize(l - p) (vector from light to position).
➭ \(\hat{E}\) is E = normalize(-1.0 * p) (since camera is at the origin).
➭ \(\hat{R}\) is R = normalize(reflect(-L, N)) (reflect \(\hat{L}\) on the surface with normal \(\hat{N}\)): Doc.
📗 Usually, the cosine angles are clamped between 0 and 1: clamp(dot(N, L), 0.0, 1.0) and clamp(dot(E, R), 0.0, 1.0).
📗 Professor Gleicher's implementation of Phong model: Link.
📗 Change the code so that the light does not move with the camera: transform the light position to its camera space position.
📗 Change the color of the object to something different so specular reflection is visible. Demo shader_light
📗 Write the shader to create stripes.
➭ Change the shader so that the stripes are horizontal.
➭ Change the shader so that the stripes of first color are wider.
📗 When there are a lot of stripes, there are jaggies (aliasing). Demo shader_proc
📗 Jaggies are edges (of triangles or lines) that do not look smooth when rasterized: Wikipedia.
📗 Triangles that are too small can be lost between pixels too. Professor Gleicher's demo: Link and Link. Demo raster_triangle
📗 Aliasing is a fundamental topic in computer graphics.
📗 The problem is converting a continuous world to a discrete set of observations.
📗 Only finite set of pixels are used, each must be one color.
📗 Discrete representation has less information; continuous world is infinite.
📗 Many possible things look the same: they are called aliases.
📗 Write different functions mapping x from -1 to 1 and y from -1 to 1 to 0 to 1 so that they have the same value when sampled on a 3 pixel by 3 pixel grid. Demo aliasing
📗 The problem of aliasing cannot be fixed. If it is not possible to have more pixels: using the pixels better is called anti-aliasing.
📗 Aliasing cannot be fixed after it already happened (points are already sampled). Filtering is about (consistently) getting rid of potential problems before they happen.
📗 In general, sharp edges (jaggies) and small points (lost between pixels) are bad: the solution is to make them bigger and make them smooth (or blur them).
📗 Anti-aliasing considers blurry to be better than wrong.
📗 Primitives can partially fill a pixel. Blurred primitive can partially cover the sample point.
📗 A pixel can involve two or more triangles, but triangles are rendered independently.
📗 In this case, transparency works (but then drawing order matters).
📗 Problem is worse in 3D with visibility and Z-buffer (Z-fighting is a form of aliasing too).
📗 (1) Multiple samples (for the same pixel).
➭ Sample more points within a pixel, for example, five points at the center (default), \(\dfrac{1}{4}\) pixel up, \(\dfrac{1}{4}\) pixel down, \(\dfrac{1}{4}\) pixel to the left, and \(\dfrac{1}{4}\) pixel to the right.
➭ To figure out the value of some variable one pixel up, down, left, and right, use the derivative functions dFdx and dFdy: Doc and Doc.
📗 (2) Edge smoothing (blurring).
➭ Instead of the step function, use the smoothstep function: Doc.
➭ Not blurry enough lead to aliasing; too blurry looks bad.
➭ A blur of one pixel wide would be appropriate. Use dFdx or dFdy to figure out the change in the variable within 1 pixel, or fwidth = abs(dFdx) + abs(dFdy): Doc.
📗 dFdx is the difference between the value of F of the pixel and the pixel on the left (or right)
📗 dFdy is the difference between the value of F of the pixel and the pixel above (or below).
📗 A group of four pixels are usually computed together, so whether the dFdx and dFdy uses the pixel on the left or right (above or below) depends on which group the pixel belongs to. Demo aliasing_derivative
📗 Blurring (smoothstep) handles magnification.
📗 Blurring does not deal with minification (need to filter over a large range). It is easier to do for images with MipMaps.
➭ Per-vertex vs per-pixel lighting.
➭ Phong model lighting.
➭ Phong model math.
➭ Procedurally generated texture.
➭ Aliasing.
➭ Anti-aliasing.
➭ Image derivatives.
➭ Edge smoothing.
📗 Notes and code adapted from the course taught by Professor Michael Gleicher.
📗 Please use Ctrl+F5 or Shift+F5 or Shift+Command+R or Incognito mode or Private Browsing to refresh the cached JavaScript: Code.
📗 You can print the notes: .
📗 Anonymous feedback can be submitted to: Form.