CS 418: Interactive Computer Graphics. Basic Shading in WebGL. Eric Shaffer

Transcription

1 CS 48: Interactive Computer Graphics Basic Shading in WebGL Eric Shaffer Some slides adapted from Angel and Shreiner: Interactive Computer Graphics 7E Addison-Wesley 205

2 Phong Reflectance Model

3 Blinn-Phong Model Jim Blinn suggested an approximating changing specular term Replace (V R ) a by (N H ) b where Halfway vector More efficient in terms of the operations used How is it faster than calculating R? Closer to physically correct lighting Pick exponent b to match what you want Using higher b>a will make output similar to Phong with a 3

4 The Halfway Vector H is normalized vector halfway between L and V 4

5 Phong versus Blinn-Phong 5

6 Example Only differences in these teapots are the parameters in the modified Phong model 6

7 Normalization Cosine terms can be computed using dot product Unit length vectors simplify calculation Usually we want to set the magnitudes to have unit length Be careful Length can be affected by transformations Note that scaling does not preserved length GLSL and glmatrix have a normalization function 7

8 Computing a Normal for a Triangle plane n (p - p 0 ) = 0 n p 2 n = (p - p 0 ) (p 2 - p 0 ) normalize n n/ n p p 0 p You can use the glmatrix library to compute normals for vertices 8

9 Specifying a Point Light Source For each light source define an RGBA color for diffuse component specular component You could specify a per-light ambient too or just have one ambient light source.. Specify the position var diffuse0 = vec4.fromvalues(.0, 0.0, 0.0,.0); var specular0 = vec4.fromvalues (.0, 0.0, 0.0,.0); var light0_pos = vec4.fromvalues (.0, 2.0, 3,0,.0); 9

10 Distance and Direction The source colors are specified in RGBA The position is given in homogeneous coordinates If w =.0, we are specifying a finite location If w =0.0, we are parallel source with the given direction vector The coefficients in distance terms are usually quadratic (/(a+b*d+c*d*d)) d is the distance from the point being rendered to the light source a,b,c are constants of your choice 0

11 Moving Light Sources Light sources are geometric objects Positions and directions can be affected a model-view matrix Should you apply the view transformation to a light? Depending on what we want to happen in a scene 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

12 Light Properties var lightposition = vec4.fromvalues (.0,.0,.0, 0.0 ); var lightambient = vec4.fromvalues (0.2, 0.2, 0.2,.0 ); var lightdiffuse = vec4.fromvalues (.0,.0,.0,.0 ); var lightspecular = vec4.fromvalues (.0,.0,.0,.0 ); 2

13 Material Properties Material properties should match the terms in the light model Reflectivities last component gives opacity var materialambient = vec4.fromvalues(.0, 0.0,.0,.0 ); var materialdiffuse = vec4.fromvalues(.0, 0.8, 0.0,.0); var materialspecular = vec4.fromvalues(.0, 0.8, 0.0,.0 ); var materialshininess = 00.0; 3

14 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 4

15 Polygonal Shading In per vertex shading Shading calculations are done for each vertex Typically, we send the parameters to the vertex shader Have it compute the shade Why do it there and not in the JS? We need per-vertex normal vectors Any suggestions on how to calculate them? Vertex shades are interpolated across an object Passed to the fragment shader as a varying variable This is referred to as smooth shading Color will vary across face of the polygon 5

16 Smooth Shading on a Sphere Mesh I know silhouette edge is bumpy for a sphere How do you make it less bumpy? Why does the middle look smooth? We can set a new normal at each vertex Per-vertex normal easy for a sphere model If centered at origin n = p 6

17 Mesh Shading The previous example is not general We knew the normal at each vertex analytically For polygonal meshes, Henri Gouraud proposed we use the average of the normals around a mesh vertex n = (n +n 2 +n 3 +n 4 )/ n +n 2 +n 3 +n 4 7

18 Gouraud and Phong Shading Gouraud Shading Find average normal at each vertex (vertex normals) Apply Blinn-Phong model at each vertex Interpolate vertex shades across each polygon Phong shading Find vertex normals Interpolate vertex normals across edges Interpolate edge normals across polygon Apply Blinn-Phong model at each fragment 8

19 Comparison If polygon mesh approximates surfaces with high curvature Phong shading may look smooth Gouraud shading may show edges Phong shading requires more work than Gouraud Until modern GPUs, not available in real time systems Now can be done using fragment shaders 9

20 Shading in the Vertex Shader Use uniforms for lighting parameters constant over all vertices attribute vec3 avertexposition; attribute vec3 avertexnormal; uniform mat4 umvmatrix; uniform mat4 upmatrix; uniform mat3 unmatrix; uniform vec3 ulightposition; uniform vec3 uambientlightcolor; uniform vec3 udiffuselightcolor; uniform vec3 uspecularlightcolor; const float shininess = 32.0;

21 Shading in the Vertex Shader Compute necessary dot products and vectors void main() { // Get the vertex position in view coordinates vec4 vertexpositioneye4 = umvmatrix * vec4(avertexposition,.0); vec3 vertexpositioneye3 = vertexpositioneye4.xyz / vertexpositioneye4.w; // Calculate the vector (l) to the light source vec3 vectortolightsource = normalize(ulightposition - vertexpositioneye3); // Transform the normal (n) to view coordinates vec3 normaleye = normalize(unmatrix * avertexnormal); // Calculate n dot l for diffuse lighting float diffuselightweightning = max(dot(normaleye, vectortolightsource), 0.0); // Calculate the reflection vector (r) that is needed for specular light vec3 reflectionvector = normalize(reflect(-vectortolightsource, normaleye));