Phong Lighting & Materials Some slides modified from: David Kabala Others from: Andries Van Damm, Brown Univ.
Lighting and Shading Lighting, or illumination, is the process of computing the intensity and color of a sample point in a scene as seen by a viewer lighting depends on the geometry of the scene the models, the lights and the camera positions & orientations the surface orientations and the surface material properties
Lighting and Shading Shading is the process of interpolation of color at points inbetween those with known lighting, typically vertices of triangles or quads in a mesh crucial to real time graphics applications (e.g., games) because calculating illumination at a point is usually expensive. Slow but good: ray-tracing computes lighting for all pixel samples Each pixel combines one or more sub-pixel sample for antialiasing, but no shading! On the GPU systems we use with WebGL, the vertex shader usually computes lighting for each vertex, the fragment shader computes shading for eacy pixel
Global Illumination Direct illumination + Indirect illumination = Total illumination
Diffuse Interreflection Total illumination (normal image)
Diffuse Interreflection Direct illumination
Diffuse Interreflection Indirect illumination (diffuse interreflection)
Human face Total illumination (normal image)
Human face Direct illumination
Human face Indirect illumination
How to separate direct and indirect components (1/3) Use a high frequency illumination pattern For example a checkerboard pattern of lit and unlit patches Each patch i that is not directly illuminated by the pattern should be lit due only to indirect illumination This gives an estimate for indirect illumination on patch i Algorithm Attribution: S. Nayar, G. Krishnan, M. Grossberg, and R. Raskar. Fast Separation of Direct and Global Components of a Scene using High Frequency Illumination, SIGGRAPH 06 11 of 56
Illumination Models: Phong Simple model (not physically based) Splits illumination at a surface into three components Ambient Non-specific constant global lighting (hack) Diffuse Color of object under normal conditions using Lambert s model Specular Highlights on shiny objects (hack) Proportional to R V α so a larger α results in a more concentrated highlight and glossier object October 31, 2013 12 of 56
Flat Shading one lighting calc per Triangle One computed RGB color for all vertices & all pixels Vertex Shader: can just ignore color Fragment Shader sets gl_fragcolor from a constant, or from a uniform variable
Gouraud Shading ( Goorr-Rowe ) one lighting calc per Vertex For each vertex, compute on-screen RGB color For each pixel, bilinearly interpolate on-screen RGB color: Vertex Shader computes a varying color variable (from vertex attributes &/or uniform vars) Fragment Shader gets a rasterized varying color value uses it to set gl_fragcolor Faceted specular highlights
Why? Flat vs Gouraud shading Flat Gouraud
Phong Shading One lighting calc per Pixel For each vertex, compute lighting vectors (Norm,Light,View) For each pixel, bilinearly interpolate vectors, compute lighting, set color Vertex Shader computes varying lighting vectors (from vertex attributes &/or uniform vars) Fragment Shader gets rasterized varying vectors computes gl_fragcolor Smooth specular highlights
Goraud vs Phong Shading Phong Lighting Emissive + Ambient + Diffuse + Specular = Computed per VERTEX Computed Per PIXEL 1 7
Reflection: Phong Model (see Nate Robins Tutors: http://www.xmission.com/~nate/tutors.html Ambient (the lighting inside shadows) + Diffuse (irradiance * albedo) Specular (mirror-like highlights) diffuse specular
OpenGL lighting Demos: Nate Robins Tutors Old OpenGL API had built-in Lighting & Materials functions: NOT programmable, yet still instructive: Up to 8 light sources ONLY Phong lighting ONLY (ambient, diffuse, specular, emissive) only Gouraud shading ONLY(per-vertex lighting calcsfaceted highlights) Demo 1: Interactive Light Direction vector L = (Lx, Ly, Lz) (white line shows direction) Demo 2: Phong Parameters: 7 RGB values, all [0,1] + shinyness Material Reflectances: Ke, Ka, Kd, Ks Light-Source Strengths: Ia, Id, Is, Se (specular exponent)
Old OpenGL API had built-in Lighting & Materials functions: OpenGL lighting Demos: Nate Robins Tutors NOT programmable, yet still instructive: Up to 8 light sources ONLY Phong lighting ONLY (ambient, diffuse, specular, emissive) only Gouraud shading ONLY (per-vertex lighting calcs faceted highlights) Demo 1: Interactive Light Direction vector L = (Lx, Ly, Lz) (white line shows light direction) https://user.xmission.com/~nate/tutors.html
Old OpenGL API had built-in Lighting & Materials functions: OpenGL lighting Demos: Nate Robins Tutors NOT programmable, yet still instructive: Up to 8 light sources ONLY Phong lighting ONLY (ambient, diffuse, specular, emissive) only Gouraud shading ONLY (per-vertex lighting calcs faceted highlights) Demo 2: Phong Parameters: 7 RGB values + shinyness 0<Se <100 Light-Source RGB: Ia, Id, Is Material RGB: Ka, Kd, Ks Ke Integer Shinyness or specular exp: 1 Se 100
Constant Color at Each Vertex (equal amounts from everywhere to everywhere)
Normal == Surface Orientation Perpendicular Vector at any Surface Point More formally: Unit-length vector N at surface point P Vector N defines surface tangent plane at P: ( For all points P T in tangent plane, (P T - P)N = 0 ) Surface Point P Normal Vector N Tangent Vector (P T P) 2D 3D Surface Point P Normal Vector N Tangent Plane
diffuse lighting : NL Shown: Light Source at Eye-point) Project B: light-source overhead
Transforming Normals We KNOW how to transform vertex positions. Can we transform Normal Vectors with the same matrix? ALMOST always, but not always! non-uniform scaling? (stretched robot arm, etc)
Transforming Normals We KNOW how to transform vertex positions. Can we transform Normal Vectors with the same matrix? ALMOST always yes, but not always: thus the answer is NO. we need a special normal transform matrix because non-uniform scaling of shapes (stretched robot arm, etc) distorts these normals:
Transforming Normals SOLUTION: use inverse-transpose: Normal Matrix == (Model Matrix) -T Why? see: http://www.lighthouse3d.com/tutorials/glsl-12- tutorial/the-normal-matrix/ or Canvas, Project B, How To Transform Normals How? cuon-matrix-quat.js functions
Transforming Normals: Why is M -T correct? Normal Vector n Any tangent vector v normal vector == perpendicular ()to surface tangent plane Any transform matrix M applied to the surface applies to the tangent plane too. Any vector v in the tangent plane is to n, thus nv = 0, or equivalently: n T v = 0 REVIEW: For any non-singular matrix M we can find an inverse M -1 that cancels it: M -1 M = I Transpose lets us multiply column vector v and matrix A in either order: Av = v T A T Expand n T v = 0 with the do-nothing identity matrix: n T M -1 Mv = 0 Associate each matrix with its neighbor: (n T M -1 )(Mv) = 0 and then look closely: (Mv) == Any and all transformed tangent-plane vectors (n T M -1 ) == The transformed normal vector guaranteed to all the tangent-plane vectors Rearrange transformed normal vector using transpose: (n T M -1 ) = (M -1 ) T n = M -T n
WebGL: Vertex Position Pipeline RECALL: in scene graphs, Vertices & values move upwards, transform calls move downwards CVV HTML-5 Canvas Viewport Project A: Draw world directly in CVV Project B: Add viewport, projection, view World CAM View Projection View Matrix Projection Matrix t0 t1 group1 t2 Model Matrix group4 t7 group3... t3 group2 t4 obj1 obj5 obj2 group3 29
WebGL: Vertex Position Pipeline RECALL: in scene graphs, Vertices & values move upwards, transform calls move downwards CVV HTML-5 Canvas Viewport Project A: Draw world directly in CVV Project B: Add viewport, projection, view Project C: Normals: in World coords normal matrix == model -T Compute all lighting values in World coordinate system Light Positions group4 World t1 t7 CAM t0 group1 group3... View t2 Projection t3 View Matrix group2 t4 Projection Matrix Normal Matrix Model Matrix obj1 obj5 obj2 group3 30
Vertex Stream Our WebGL Vertex Pipeline gl.modelview gl.projection model sssssss s transfm view trnsfm projection transformation transformation divide: x/w, y/w, z/w 4D 3D HTML-5 Canvas The CVV clipping ViewPort transformation gl.viewport(llx, lly width,height) (in pixels) 31
Vertex Stream Light Positions n Our WebGL Vertex Pipeline gl.modelview model + model view + view transformation transformation Project C: World coord.system Normal Matrix (modelview -T ) CAM coord. system gl.projection projection transformation Lighting Calcs: Vertex Shader Fragment Shader Compute lighting in WORLD coordinate system (e.g. find NL, find R vector, etc). View: transform from World to CAM (How? apply View matrix in modelview) Normals: from Object to World normal matrix == modelview -T divide: x/w, y/w, z/w 4D 3D The CVV clipping ViewPort transform HTML-5 CANVAS onscreen 32
Phong Lighting Step 1: Find Scene Vectors To find On-Screen RGB Color at point P (start): 1) Find all 3D scene vectors first: a) Light Vector L: unit vector towards light source b) Normal Vector N: unit vector perpendicular to surface at P c) View Vector V: unit vector towards camera eye-point On to step 2: how do we find the Reflected-light Vector R?
Phong Lighting Step 2: Find reflection Vector R To find On-Screen RGB Color at point P (cont d): L N R i i 2) COMPUTE the Light Reflection Vector R: Given unit light vector L, find lengthened normal C C = N (LN) In diagram, if we add vector 2*(C-L) to L vector we get R vector. Simplify: R = 2C L Result: unit-length R vector GLSL-ES See built-in reflect() function (If N is a unit-length vector, then R vector length matches L vector length)
Phong Lighting Step 3: Gather Light & Material Data To find On-Screen RGB Color at point P (cont d): 3) For each light source, gather: RGB triplet for Ambient Illumination Ia 0 Iar, Iag, Iab 1 RGB triplet for Diffuse Illumination Id 0 Idr, Idg, Idb 1 RGB triplet for Specular Illumination Is 0 Isr, Isg, Isb 1 For each surface material, gather: RGB triplet for Ambient Reflectance Ka 0 Kar, Kag, Kab 1 RGB triplet for Diffuse Reflectance Kd 0 Kdr, Kdg, Kdb 1 RGB triplet for Specular Reflectance Ks 0 Kar, Kag, Kab 1 RGB triplet for Emissive term(often zero) Ke 0 Ker, Keg, Keb 1 Scalar shinyness or specular exponent term Se 1 Se ~100
Phong Lighting Step 4: Sum of Light Amounts To find On-Screen RGB Color at point P (cont d): sum of each kind of light at P: Phong Lighting = Ambient + Diffuse + Specular + Emissive SUMMED for all light sources 4) For the i-th light source, find: RGB= Ke + Ia*Ka + Id*Kd*Att*max(0,(N L)) Is*Ks*Att*(max(0,R V)) Se, // emissive material; it glows! // ambient light * ambient reflectance // diffuse light * diffuse reflectance // specular light * specular reflectance Distance Attenuation scalar: 0 Att 1 Fast, OK-looking default value: Att = 1.0 Physically correct value: Att(d) = 1/(distance to light) 2 (too dark too fast!) Faster, Nice-looking Hack : Att(d) = 1/(distance to light) OpenGL compromise: Att(d) = min(1, 1/(c1 + c2*d + c3*d 2 ) ) Shinyness or specular exponent 1 Se ~100 (large for sharp, small highlights)
Light Transport: Inverse Square Law Amount of light that illuminates an object decreases with square of distance between them. Why? For a given 3D angle (solid angle), the area it covers grows with the square of the distance 37
!END!