1. 1 Graphics CSCI 343, Fall 2015 Lecture 21 Lighting and Shading III

2. 2 The halfway vector Computing r takes a lot of computation. We can approximate the angle between r and v by computing the halfway vector. l n r v ii  h  The angle between n and h, , is 1/2 the angle between r and v, . What is  in terms of  ? We can use  instead of  in our calculation of specular reflection: We adjust  ' to account for the fact that  <  2  = 

3. 3 Example of computing h Compute h from the following l and v:

4. 4 The Phong reflection model and OpenGL The Phong reflection model: In webGL we must specify: 1) Lighting properties: Ld, Ls and La 2) Light position (or direction): l 3) Material reflectance properties: kd, ks, ka,  4) Surface normals

5. 5 Flat Shading In older versions of OpenGL, it was more efficient to use flat shading, which specifies a single color for each polygonal face of an object. In flat shading, the light source is modeled as a distant source. Each point on each plane has the same light hitting it and so each plane is a uniform color. In this case, we would specify each surface normal once, and associate it with the vertices of a corresponding polygon. With vertex shaders in the newer versions of OpenGL and WebGL, we now can do the shading computation much more quickly with each vertex, so flat shading is not necessary.

6. 6 Problem with Flat Shading Flat shading models a distant viewer and a distant light source. If the polygon is flat, then n, l, and v are constant over the entire polygon. Older versions of OpenGL used the surface normal associated with the first vertex to specify the normals for the entire polygon. Problem: The changes in lighting look too abrupt. Sometimes see light and dark lines at edges (Mach bands), because of the way the visual system processes the intensity changes. l l l v v v Sharp Edge I x I x IntensityAppearance

7. 7 Specify Light properties Specify values of the ambient, diffuse and specular light parameters as well as the light position in the application (javaScript) file: 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 ); var lightPosition = vec4(1.0, 1.0, 1.0, 0.0 );

8. 8 Distant vs. Nearby light sources For distant light sources, we only need to specify the direction, because the light rays hitting the surface are all approximately parallel: postion = vec4(1.0, 1.0, 1.0, 0.0);//Note w is zero. For nearby light sources, we must specify position explicitly. postion = vec4(100.0, 100.0, 100.0, 1.0);//Note w is one. Distant sourceNearby source

9. 9 Specifying Material Properties Specify the material properties (reflection of ambient, diffuse and specular light components, as well as the shininess) in the javaScript file: 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; Compute the product of the light and material properties: ambientProduct = mult(lightAmbient, materialAmbient); diffuseProduct = mult(lightDiffuse, materialDiffuse); specularProduct = mult(lightSpecular, materialSpecular);

10. 10 Send lighting and Material information to the shaders 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);

11. 11 Specifying the Normal vectors (-0.5, -0.5, 0.5) (0.5, 0.5, -0.5) The normals for a box with faces parallel to the x-y, y-z and z-x planes are the unit vectors along the x, y or z axes, in the positive or negative directions. n 1 = (1.0, 0.0, 0.0) n 4 = (0.0, 1.0, 0.0) 01 23 5 67 4 n 0 = (0.0, 0.0, 1.0)

12. 12 Set up vertices and normals var vertices = [ vec4( -0.5, -0.5, 0.5, 1.0 ), vec4( -0.5, 0.5, 0.5, 1.0 ), vec4( 0.5, 0.5, 0.5, 1.0 ), vec4( 0.5, -0.5, 0.5, 1.0 ), vec4( -0.5, -0.5, -0.5, 1.0 ),vec4( -0.5, 0.5, -0.5, 1.0 ), vec4( 0.5, 0.5, -0.5, 1.0 ), vec4( 0.5, -0.5, -0.5, 1.0 ) ]; var normals = [ vec3(0.0, 0.0, 1.0), vec3(1.0, 0.0, 0.0), vec3(0.0, 0.0, -1.0), vec3(-1.0, 0.0, 0.0), vec3(0.0, 1.0, 0.0), vec3(0.0, -1.0, 0.0) ];

13. 13 Calculating Surface Normals Not all surface normals are as easy to compute as for the cube. We can calculate surface normal for any flat surface from 3 of its vertices. p0p0 p1p1 p3p3 Calculating the cross product: (p 1 - p 0 ) x (p 3 - p 0 ) = ? vertices from cube

14. 14 Code for computing the cross product /* Compute (b - a) x (c - a). Store the result in d. After computing the cross product, normalize the length of d to 1. */ void cross(point3 a, point3 b, point3 c, point3 d){ //we will complete this code in class. normalize(d);//Set length to one. Not technically // part of cross product computation } a b c

15. 15 Using MV.js functions to compute normals We can use functions from MV.js from the textbook to compute normals given three vertices (a, b and c): function quad(a, b, c, d) { var t1 = subtract(vertices[b], vertices[a]); var t2 = subtract(vertices[c], vertices[b]); var normal = cross(t1, t2); var normal = vec3(normal); //continued next slide

16. 16 Create an array of normals corresponding to vertices //quad( ) function continued pointsArray.push(vertices[a]); normalsArray.push(normal); pointsArray.push(vertices[b]); normalsArray.push(normal); pointsArray.push(vertices[c]); normalsArray.push(normal); pointsArray.push(vertices[a]); normalsArray.push(normal); pointsArray.push(vertices[c]); normalsArray.push(normal); pointsArray.push(vertices[d]); normalsArray.push(normal); } //end of quad( )

17. 17 Sending the Normal Array to the Vertex Shader As with the colors, we set up a buffer for the normal array and attach it to our shader attribute, vNormal: var nBuffer = gl.createBuffer(); gl.bindBuffer( gl.ARRAY_BUFFER, nBuffer ); gl.bufferData( gl.ARRAY_BUFFER, flatten(normalsArray), gl.STATIC_DRAW ); var vNormal = gl.getAttribLocation( program, "vNormal" ); gl.vertexAttribPointer( vNormal, 3, gl.FLOAT, false, 0, 0 ); gl.enableVertexAttribArray( vNormal );

18. 18 The Vertex Shader The vertex shader does the calculation of the fragment colors based on the lighting and normal information sent from the Javascript application. Next time: The vertex shader code.