Lighting CS 4600 Fall 2015 Utah School of Computing Objectives Learn to shade objects so their images appear three-dimensional Introduce the types of light-material interactions Build a simple reflection model---the Phong model--- that can be used with real time graphics hardware E. Angel and D. Shreiner: Interactive Computer Graphics 6E Addison-Wesley 2012 Computer Graphics CS4600 1
Why we need shading Suppose we build a model of a sphere using many polygons and color it with vertex attributes. We get something like But we want E. Angel and D. Shreiner: Interactive Computer Graphics 6E Addison-Wesley 2012 Shading Why does the image of a real sphere look like Light-material interactions cause each point to have a different color or shade Need to consider Light sources Material properties Location of viewer Surface orientation E. Angel and D. Shreiner: Interactive Computer Graphics 6E Addison-Wesley 2012 Computer Graphics CS4600 2
Light strikes A Some scattered Some absorbed Some of scattered light strikes B Some scattered Some absorbed Some of this scattered light strikes A and so on Scattering E. Angel and D. Shreiner: Interactive Computer Graphics 6E Addison-Wesley 2012 Rendering Equation The infinite scattering and absorption of light can be described by the rendering equation Cannot be solved in general Ray tracing is a special case for perfectly reflecting surfaces Rendering equation is global and includes Shadows Multiple scattering from object to object E. Angel and D. Shreiner: Interactive Computer Graphics 6E Addison-Wesley 2012 Computer Graphics CS4600 3
Rendering Equation Utah School of Computing where is a particular wavelength of light is time is the location in space is the direction of the outgoing light is the negative direction of the incoming light is the total spectral radiance of wavelength directed outward along direction at time, from a particular position is emitted spectral radiance is the unit hemisphere containing all possible values for is an integral over is the bidirectional reflectance distribution function, (BRDF) the proportion of light reflected from to at position, time and at wavelength is spectral radiance of wavelength coming inward toward from direction at time is the weakening factor of inward irradiance due to incident angle, as the light flux is smeared across a surface whose area is larger than the projected area perpendicular to the ray Utah School of Computing Computer Graphics CS4600 4
BRDF: Bidirectional Reflection Distribution Function BRDF (Green) Composed of Three Lobes (Blue) Diffuse Component (Orange) Utah School of Computing Global Effects shadow multiple reflection translucent surface E. Angel and D. Shreiner: Interactive Computer Graphics 6E Addison-Wesley 2012 Computer Graphics CS4600 5
Local vs Global Rendering Correct shading requires a global calculation involving all objects and light sources Incompatible with pipeline model which shades each polygon independently (local rendering) However, in computer graphics, especially real time graphics, we are happy if things look right Exist many techniques for approximating global effects E. Angel and D. Shreiner: Interactive Computer Graphics 6E Addison-Wesley 2012 Light-Material Interaction Light that strikes an object is partially absorbed and partially scattered (reflected) The amount reflected determines the color and brightness of the object A surface appears red under white light because the red component of the light is reflected and the rest is absorbed The reflected light is scattered in a manner that depends on the smoothness and orientation of the surface E. Angel and D. Shreiner: Interactive Computer Graphics 6E Addison-Wesley 2012 Computer Graphics CS4600 6
Light Sources General light sources are difficult to work with because we must integrate light coming from all points on the source E. Angel and D. Shreiner: Interactive Computer Graphics 6E Addison-Wesley 2012 Point source Simple Light Sources Model with position and color Distant source = infinite distance away (parallel) Spotlight Restrict light from ideal point source Ambient light Same amount of light everywhere in scene Can model contribution of many sources and reflecting surfaces E. Angel and D. Shreiner: Interactive Computer Graphics 6E Addison-Wesley 2012 Computer Graphics CS4600 7
Shading Schemes Flat Shading: same shade to entire polygon CS4600 Mach Band Illusion CS4600 Computer Graphics CS4600 8
Surface Types The smoother a surface, the more reflected light is concentrated in the direction a perfect mirror would reflected the light A very rough surface scatters light in all directions smooth surface rough surface E. Angel and D. Shreiner: Interactive Computer Graphics 6E Addison-Wesley 2012 Phong Model A simple model that can be computed rapidly Has three components Diffuse Specular Ambient Uses four vectors To source To viewer Normal Perfect reflector E. Angel and D. Shreiner: Interactive Computer Graphics 6E Addison-Wesley 2012 Computer Graphics CS4600 9
Ideal Reflector Normal is determined by local orientation Angle of incidence = angle of relection The three vectors must be coplanar r = 2 (l n ) n - l Why does this work? E. Angel and D. Shreiner: Interactive Computer Graphics 6E Addison-Wesley 2012 Lambertian Surface Perfectly diffuse reflector Light scattered equally in all directions Amount of light reflected is proportional to the vertical component of incoming light reflected light ~cos i cos i = l n if vectors normalized There are also three coefficients, k r, k b, k g that show how much of each color component is reflected E. Angel and D. Shreiner: Interactive Computer Graphics 6E Addison-Wesley 2012 Computer Graphics CS4600 10
Specular Surfaces Most surfaces are neither ideal diffusers nor perfectly specular (ideal reflectors) Smooth surfaces show specular highlights due to incoming light being reflected in directions concentrated close to the direction of a perfect reflection specular highlight E. Angel and D. Shreiner: Interactive Computer Graphics 6E Addison-Wesley 2012 Modeling Specular Relections Phong proposed using a term that dropped off as the angle between the viewer and the ideal reflection increased I r ~ k s I cos reflected shininess coef incoming intensity intensity absorption coef E. Angel and D. Shreiner: Interactive Computer Graphics 6E Addison-Wesley 2012 Computer Graphics CS4600 11
The Shininess Coefficient Values of between 100 and 200 correspond to metals Values between 5 and 10 give surface that look like plastic cos -90 90 E. Angel and D. Shreiner: Interactive Computer Graphics 6E Addison-Wesley 2012 Shading Schemes Gouraud Shading: smoothly blended intensity across each polygon CS4600 Computer Graphics CS4600 12
Phong Shading: interpolated normals to compute intensity at each point Shading Schemes CS4600 Bui Toung Phong Thesis y Scan Convert Polygon P I 1 I a I b y s I2 3 I p I x CS4600 Computer Graphics CS4600 13
Intensity Interpolation I, I, I 1 2 3 I 1 : Compute by direction evaluation of illumination expression, whichever formula is being used I 2 I 3 C4600 Surface Normals Normals define how a surface reflects light Vertex Attribute Use unit normals for proper lighting scaling affects a normal s length Computer Graphics CS4600 14
Using Average Normals N = true (geometric) normal CS4600 Using Average Normals N N2 N 1 CS4600 Computer Graphics CS4600 15
Using Average Normals N N N2 N 1 2 N1 N2 N 1 CS4600 Using Average Normals N 1 N N N2 CS4600 Computer Graphics CS4600 16
N 1 2 3 4 What should corner normals be? N N N N N N N N 1 2 3 4 More generally, N n N i 1 n N i 1 i i CS4600 Plane Normals Equation of plane: ax+by+cz+d = 0 From Chapter 4 we know that plane is determined by three points p 0, p 2, p 3 or normal n and p 0 Normal can be obtained by n = (p 2 -p 0 ) (p 1 -p 0 ) Computer Graphics CS4600 17
plane n (p - p 0 ) = 0 Normal for Triangle n p n = (p 2 - p 0 ) (p 1 - p 0 ) p p 1 normalize n n/ n p 0 Note that right-hand rule determines outward face Winding order maters CCW 2 Normal to Sphere Implicit function f(x,y.z)=0 Normal given by gradient Sphere f(p)=p p-1 n = [ f/ x, f/ y, f/ z] T =p Computer Graphics CS4600 18
For sphere Parametric Form x=x(u,v)=cos u sin v y=y(u,v)=cos u cos v z= z(u,v)=sin u Tangent plane determined by vectors p/ u = [ x/ u, y/ u, z/ u]t p/ v = [ x/ v, y/ v, z/ v]t Normal given by cross product n = p/ u p/ v Normal given by center-(x,y,z) General Case We can compute parametric normals for other simple cases Quadrics Parametric polynomial surfaces Bezier surface patches (Chapter 11) Computer Graphics CS4600 19
Ambient Light Ambient light is the result of multiple interactions between (large) light sources and the objects in the environment Amount and color depend on both the color of the light(s) and the material properties of the object Add k a I a to diffuse and specular terms reflection coef intensity of ambient light Distance Terms The light from a point source that reaches a surface is inversely proportional to the square of the distance between them We can add a factor of the form 1/(a + bd +cd 2 ) to the diffuse and specular terms The constant and linear terms soften the effect of the point source Computer Graphics CS4600 20
Light Sources In the Phong Model, we add the results from each light source Each light source can have separate diffuse, specular, and ambient terms to allow for maximum flexibility even though this form does not have a physical justification OR just an illumination term Separate red, green and blue components Hence, either 3 or 9 coefficients for each point source I dr, I dg, I db, I sr, I sg, I sb, I ar, I ag, I ab or I r, I g, I b Material Properties Material properties model the surface BRDF with a constant approximation Nine absorbtion coefficients Ambient k ar, k ag, k ab Diffuse k dr, k dg, k db, Specular k sr, k sg, k sb, Shininess coefficient Computer Graphics CS4600 21
Adding up the Components For each light source and each color component, the Phong model can be written (without the distance terms) as I = k a I a + k d I d l n +k s I s (v r ) For each color component we add contributions from all sources Relevant Light (unit) Vectors Surface Normal Point light source direction Reflection direction Viewpoint direction CS4600 Computer Graphics CS4600 22
Flat (Cosine) Shading (diffuse) Compute constant shading function, over each polygon, based on simple cosine term Same normal and light vector across whole polygon Constant shading for polygon CS4600 Flat (Cosine) Shading(diffuse) Where,, for unit N, L intensity of point light source diffuse reflection coefficient CS4600 Computer Graphics CS4600 23
Compute constant shading function, for each vertex, based on simple cosine term different normal and light vector for each vertex Interpolated shading for polygon Gouraud Shading CS4600 Intensity Interpolation (Gouraud) CS4600 Computer Graphics CS4600 24
Normal Interpolation (Phong) y s CS4600 Normal Interpolation (Phong) Normalizing makes this a unit vector CS4600 Computer Graphics CS4600 25
Gouraud vs Phong Interpolation Flat Shading Vertex Shading Fragment Shading Utah School of Computing Phong Illumination Formula Where, a denotes ambient term d denotes diffuse term s denotes specular term k denotes coefficient I denotes intensity CS4600 Computer Graphics CS4600 26
Effect of Exponent Parameter As n increases, highlight is more concentrated, surface appears glossier cos n ( ) n 3 n 1 n 2 n 10 Demo Utah School of Computing Computer Graphics CS4600 27
Modified Phong Model The specular term in the Phong model is problematic because it requires the calculation of a new reflection vector and view vector for each vertex Blinn suggested an approximation using the halfway vector that is more efficient The Halfway Vector h is normalized vector halfway between l and v h = ( l + v )/ l + v Computer Graphics CS4600 28
Using the halfway vector Replace (v r ) by (n h ) is chosen to match shininess Note that halfway angle is half of angle between r and v if vectors are coplanar Resulting model is known as the modified Phong or Phong-Blinn lighting model Specified in OpenGL standard Computing Reflection Direction Angle of incidence = angle of reflection Normal, light direction and reflection direction are coplaner Want all three to be unit length r 2(l n)n l h = ( l + v )/ l + v Computer Graphics CS4600 29
Relevant Light (unit) Vectors Surface Normal Point light source direction Reflection direction Viewpoint direction CS4600 Computation of Vectors l and v are specified by the application Can compute r from l and n Problem is determining n For simple surfaces can be determined but how we determine n differs depending on underlying representation of surface OpenGL leaves determination of normal to application Exception for GLU quadrics and Bezier surfaces was deprecated Computer Graphics CS4600 30
Example Only differences in these teapots are the parameters in the modified Phong model Need Normals Material properties Lights WebGL lighting - State-based shading functions have been deprecated (glnormal, glmaterial, gllight) - Compute in shaders Computer Graphics CS4600 31
Normalization Cosine terms in lighting calculations can be computed using dot product Unit length vectors simplify calculation Usually we want to set the magnitudes to have unit length but Length can be affected by transformations Note that scaling does not preserve length GLSL has a normalization function Specifying a Point Light Source For each light source, we can set an RGBA for the diffuse, specular, and ambient components, and for the position or just RGBA and position var diffuse0 = vec4(1.0, 0.0, 0.0, 1.0); var ambient0 = vec4(1.0, 0.0, 0.0, 1.0); var specular0 = vec4(1.0, 0.0, 0.0, 1.0); Or var light0 = vec4(1.0, 0.0, 0.0, 1.0); var light0_pos = vec4(1.0, 2.0, 3,0, 1.0); Computer Graphics CS4600 32
Distance and Direction The source colors are specified in RGBA The position is given in homogeneous coordinates If w =1.0, we are specifying a finite location If w =0.0, we are specifying a parallel source with the given direction vector The coefficients in distance terms are usually quadratic (1/(a+b*d+c*d*d)) where d is the distance from the point being rendered to the light source Derive from point source Direction Cutoff Attenuation Proportional to cos Spotlights Demo Computer Graphics CS4600 33
Global Ambient Light Ambient light depends on color of light sources A red light in a white room will cause a red ambient term that disappears when the light is turned off A global ambient term that is often helpful for testing (non-black objects) Moving Light Sources Light sources are geometric objects whose positions or directions are affected by the modelview matrix Depending on where we place the position (direction) setting function, we can Move the light source(s) with the object(s) Fix the object(s) and move the light source(s) Fix the light source(s) and move the object(s) Move the light source(s) and object(s) independently Demo Computer Graphics CS4600 34
Light Properties var lightposition = vec4(1.0, 1.0, 1.0, 0.0 ); var lightambient = vec4(0.2, 0.2, 0.2, 1.0 ); var lightdiffuse = vec4( 1.0, 1.0, 1.0, 1.0 ); var lightspecular = vec4( 1.0, 1.0, 1.0, 1.0 ); Material Properties Material properties should match the terms in the light model Reflectivities w component gives opacity var materialambient = vec4( 1.0, 0.0, 1.0, 1.0 ); var materialdiffuse = vec4( 1.0, 0.8, 0.0, 1.0); var materialspecular = vec4( 1.0, 0.8, 0.0, 1.0 ); var materialshininess = 100.0; Computer Graphics CS4600 35
Using MV.js for Products var ambientproduct = mult(lightambient, materialambient); var diffuseproduct = mult(lightdiffuse, materialdiffuse); var specularproduct = mult(lightspecular, materialspecular); gl.uniform4fv(gl.getuniformlocation(program, "ambientproduct"), flatten(ambientproduct)); gl.uniform4fv(gl.getuniformlocation(program, "diffuseproduct"), flatten(diffuseproduct) ); gl.uniform4fv(gl.getuniformlocation(program, "specularproduct"), flatten(specularproduct) ); gl.uniform4fv(gl.getuniformlocation(program, "lightposition"), flatten(lightposition) ); gl.uniform1f(gl.getuniformlocation(program, "shininess"), materialshininess); Front and Back Faces Every face has a front and back For many objects, we never see the back face so we don t care how or if it s rendered If it matters, we can handle in shader back faces not visible back faces visible Computer Graphics CS4600 36
Emissive Term We can simulate a light source in WebGL by giving a material an emissive component This component is unaffected by any sources (non-lit) Transparency Material properties are specified as RGBA values The A value can be used to make the surface translucent The default is that all surfaces are opaque Later we will enable blending and use this feature However with the HTML5 canvas, A<1 will mute colors Computer Graphics CS4600 37
Normal Matrix In the book: From world space to eye space: v = Mv move the camera location to origin, looking down Z axis v n = v T n = v n Angle between v & n must be the same in eye-space Utah School of Computing Normal Matrix In the book: From world space to eye space: v = Mv move the camera location to origin, looking down Z axis v n = v T n = v n = (Mv) T (Nn) Utah School of Computing Computer Graphics CS4600 38
Normal Matrix In the book: From world space to eye space: v = Mv move the camera location to origin, looking down Z axis v n = v T n = v n = (Mv) T (Nn) = v T M T Nn So: M T N = I Thus: N = (M T ) -1 Utah School of Computing Normal Matrix Another way to think about it: vertexeyespace = gl_modelviewmatrix * gl_vertex; Shouldn t this also work: normaleyespace = vec3(gl_modelviewmatrix * vec4(gl_normal,0.0)); after scale: Utah School of Computing Computer Graphics CS4600 39
Normal Matrix Another way to think about it: vertexeyespace = gl_modelviewmatrix * gl_vertex; Shouldn t this also work: normaleyespace = vec3(gl_modelviewmatrix * vec4(gl_normal,0.0)); after non-uniform scale: Utah School of Computing Normal Matrix after non-uniform scale: Modelview was applied to all vertices and all normals. This is clearly wrong! Say: T = P 2 P 1 MT = M(P 2 P 1 ) MT = MP 2 MP 1 T = P 2 P 1 Hence: M preserves tangents but not normals Utah School of Computing Computer Graphics CS4600 40
Normal Matrix after non-uniform scale: Say: N = Q 2 Q 1 But a vector defined by: Q 2 Q 1 may not be normal to T Utah School of Computing Normal Matrix Consider G as the proper matrix for the normal We know: T N = 0 We also know that N T = 0 T can be multiplied by the upper 3x3 of the modelview (call it M) N T = (GN) (MT) = 0 (GN) (MT) = (GN) T * (MT) (GN) T * (MT) = N T G T MT N T T = T N = 0 If G T M = I then N T = T N = 0 So: G T M = I G M 1 T Utah School of Computing Computer Graphics CS4600 41
Normal Matrix G T M = I G = (M -1 ) T When does: M -1 = M T? When: M -1 = M T Then G = M Utah School of Computing Lighting Models From To Somewhere Everywhere Somewhere Specular Lambertian Everywhere Cautics Ambient CS4600 Computer Graphics CS4600 42