1. 1 Introduction to Computer Graphics with WebGL Ed Angel Professor Emeritus of Computer Science Founding Director, Arts, Research, Technology and Science Laboratory University of New Mexico E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012

2. 2 Lighting and Shading I Ed Angel Professor Emeritus of Computer Science University of New Mexico E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012

3. 3 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

4. 4 Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009 Why do we need shading

5. 5 Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009 Why do we need shading

6. 6 Why we need shading Suppose we build a model of a sphere using many polygons and color it with a single color. We get something like But we want E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012

7. 7 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

8. 8 Scattering 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 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012

9. 9 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 What is ray tracing ? (ray casting…)What is ray tracing ? www.povray.org (see hall of fame…)www.povray.org 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

10. 10 Global Effects translucent surface shadow multiple reflection E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012

11. 11 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” ­There exists many techniques for approximating global effects E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012

12. 12 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

13. 13 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

14. 14 Simple Light Sources Point source ­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

15. 15 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

16. 16 Phong Phong Model (photo)photo A simple model that can be computed rapidly Has three components ­Diffuse ­Specular ­Ambient Uses four unit vectors ­To source ­To viewer ­Normal ­Perfect reflector E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012 Note: v is not necessarily in the l-n-r plane

17. 17 Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009 Phong Phong Model IMPORTANT NOTICE: ­When using shaders, you need to understand the mathematics involved in this model.

18. 18 Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009 Phong Phong Model How do we calculate v ? LookAt(4.0,5.0,6.0,…) … For a vertex (1.0,1.0,4.0) v’=(4.0-1.0, 5.0-1.0, 6.0-4.0) v’=(3.0,4.0,2.0) then we normalize to obtain a unit vector v…

19. 19 Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009 Phong Phong Model How do we calculate l ? Let’s suppose some function (to be seen later) defines light source located at (10.0,15.0,16.0) … For a vertex (1.0,1.0,4.0) l’=(10.0-1.0, 15.0-1.0, 16.0-4.0) l’=(9.0,14.0,12.0) then we normalize to obtain a unit vector l…

20. 20 Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009 Phong Phong Model How do we calculate n ? Some function (to be seen later) allow to define a normal vector. ­The user can determine this vector either by “hardcoding” the coordinates or by calculating the coordinates (cross-product).

21. 21 Ideal Reflector Normal is determined by local orientation Angle of incidence = angle of relection The three unit vectors must be coplanar r = 2 (l · n ) n – l (see proof )proof E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012

22. 22 Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009 Let’s derive the first term of the Phong model

23. 23 Lambertian Surface E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012 Perfectly diffuse reflector Light scattered equally in all directions Amount of light reflected is proportional to the vertical component of incoming light (example : the sun… fig. 6.15a 6.15b)6.15a6.15b ­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

24. First term of the Phong model k d I d (l  n) 24 Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

25. Let’s derive the second term of the Phong model 25 Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009

26. 26 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

27. 27 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   shininess coef absorption coef incoming intensity reflected intensity E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012

28. 28 The Shininess Coefficient φ is the angle between v and r (cos φ = v  r) 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

29. Second term of the Phong model k s I s (v  r)  29 Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009