1 Introduction to Computer Graphics with WebGL Ed Angel Professor Emeritus of Computer Science Founding Director, Arts, Research, Technology and Science.

Slides:



Advertisements
Similar presentations
Computer Graphics - Shading -
Advertisements

1 Graphics CSCI 343, Fall 2013 Lecture 18 Lighting and Shading.
Virtual Realism LIGHTING AND SHADING. Lighting & Shading Approximate physical reality Ray tracing: Follow light rays through a scene Accurate, but expensive.
1 Computer Graphics By : Mohammed abu Lamdy ITGD3107 University of Palestine Supervision: Assistant Professor Dr. Sana’a Wafa Al-Sayegh.
Light Issues in Computer Graphics Presented by Saleema Amershi.
1. What is Lighting? 2 Example 1. Find the cubic polynomial or that passes through the four points and satisfies 1.As a photon Metal Insulator.
Based on slides created by Edward Angel
1 Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009 Shading I.
University of New Mexico
Lighting and Shading Wen-Chieh (Steve) Lin
Objectives Learn to shade objects so their images appear three- dimensional Learn to shade objects so their images appear three- dimensional Introduce.
1 Angel: Interactive Computer Graphics 4E © Addison-Wesley 2006 Shading II Ed Angel Professor of Computer Science, Electrical and Computer Engineering,
University of British Columbia CPSC 314 Computer Graphics Jan-Apr 2005 Tamara Munzner Lighting and Shading Week.
CS5500 Computer Graphics March 26, Shading Reference: Ed Angel’s book.
1 Angel: Interactive Computer Graphics 4E © Addison-Wesley 2005 Shading I Ed Angel Professor of Computer Science, Electrical and Computer Engineering,
Course Website: Computer Graphics 16: Illumination.
LIGHTING Part One - Theory based on Chapter 6. Lights in the real world Lights bounce off surfaces and reflect colors, scattering light in many directions.
Shading Surface can either (both) 1.Emit light. E.g. light bult 2.Reflect light. E.g. Mirror.
CS 480/680 Computer Graphics Shading I Dr. Frederick C Harris, Jr.
Illumination.
Fundamentals of Computer Graphics Part 6 Shading prof.ing.Václav Skala, CSc. University of West Bohemia Plzeň, Czech Republic ©2002 Prepared with Angel,E.:
CS 445 / 645: Introductory Computer Graphics
Computer Graphics Lighting.
1 Shading I Shandong University Software College Instructor: Zhou Yuanfeng
1 Angel: Interactive Computer Graphics 4E © Addison-Wesley 2005 Chapter 6: Shading Ed Angel Professor of Computer Science, Electrical and Computer Engineering,
Shading (introduction to rendering). Rendering  We know how to specify the geometry but how is the color calculated.
1 Introduction to Computer Graphics with WebGL Ed Angel Professor Emeritus of Computer Science Founding Director, Arts, Research, Technology and Science.
1 Introduction to Computer Graphics with WebGL Ed Angel Professor Emeritus of Computer Science Founding Director, Arts, Research, Technology and Science.
1 Introduction to Computer Graphics with WebGL Ed Angel Professor Emeritus of Computer Science Founding Director, Arts, Research, Technology and Science.
1 Chapter 6 Shading. 2 Objectives Learn to shade objects so their images appear three-dimensional Introduce the types of light-material interactions Build.
CSC418 Computer Graphics n Illumination n Lights n Lightinging models.
1 Introduction to Computer Graphics with WebGL Ed Angel Professor Emeritus of Computer Science Founding Director, Arts, Research, Technology and Science.
1 Introduction to Computer Graphics with WebGL Ed Angel Professor Emeritus of Computer Science Founding Director, Arts, Research, Technology and Science.
David Luebke 1 10/26/2015 Lighting CS 445/645 Introduction to Computer Graphics David Luebke, Spring 2003.
University of Texas at Austin CS 378 – Game Technology Don Fussell CS 378: Computer Game Technology Basic Rendering Pipeline and Shading Spring 2012.
1 Introduction to Computer Graphics with WebGL Ed Angel Professor Emeritus of Computer Science Founding Director, Arts, Research, Technology and Science.
1 Angel: Interactive Computer Graphics 4E © Addison-Wesley 2005 Shading I Ed Angel Professor of Computer Science, Electrical and Computer Engineering,
1 Introduction to Computer Graphics with WebGL Ed Angel Professor Emeritus of Computer Science Founding Director, Arts, Research, Technology and Science.
Illumination and Shading
1 Introduction to Computer Graphics with WebGL Ed Angel Professor Emeritus of Computer Science Founding Director, Arts, Research, Technology and Science.
Shading in OpenGL Ed Angel Professor Emeritus of Computer Science University of New Mexico 1 E. Angel and D. Shreiner: Interactive Computer Graphics 6E.
Lecture Fall 2001 Illumination and Shading in OpenGL Light Sources Empirical Illumination Shading Transforming Normals Tong-Yee Lee.
Introduction to Computer Graphics with WebGL
Shading. For Further Reading Angel 7 th Ed: ­Chapter 6 2.
1 Introduction to Computer Graphics with WebGL Ed Angel Professor Emeritus of Computer Science Founding Director, Arts, Research, Technology and Science.
1 Introduction to Computer Graphics with WebGL Ed Angel Professor Emeritus of Computer Science Founding Director, Arts, Research, Technology and Science.
1 CSCE 441: Computer Graphics Lighting Jinxiang Chai.
1 Introduction to Computer Graphics with WebGL Ed Angel Professor Emeritus of Computer Science Founding Director, Arts, Research, Technology and Science.
OpenGL Shading. 2 Objectives Learn to shade objects so their images appear three-dimensional Introduce the types of light-material interactions Build.
Lighting and Reflection Angel Angel: Interactive Computer Graphics5E © Addison-Wesley
Computer Graphics Lecture 25 Fasih ur Rehman. Last Class Shading.
1 Introduction to Computer Graphics with WebGL Ed Angel Professor Emeritus of Computer Science Founding Director, Arts, Research, Technology and Science.
1 CSCE 441: Computer Graphics Lighting Jinxiang Chai.
1 Introduction to Computer Graphics with WebGL Ed Angel Professor Emeritus of Computer Science Founding Director, Arts, Research, Technology and Science.
Computer Graphics: Illumination
C O M P U T E R G R A P H I C S Guoying Zhao 1 / 55 C O M P U T E R G R A P H I C S Guoying Zhao 1 / 55 Computer Graphics Three-Dimensional Graphics V.
Illumination : Hearn & Baker Ch. 10
7. Illumination Phong Illumination Diffuse, Specular and Ambient
Introduction to Computer Graphics with WebGL
CSC461: Lecture 23 Shading Computation
Introduction to Computer Graphics with WebGL
Introduction to Computer Graphics with WebGL
CS5500 Computer Graphics April 10, 2006.
Isaac Gang University of Mary Hardin-Baylor
Introduction to Computer Graphics with WebGL
Lighting and Shading (I)
CS 480/680 Computer Graphics Shading.
CS 480/680 Computer Graphics Shading.
Shading in OpenGL Ed Angel Professor Emeritus of Computer Science
Presentation transcript:

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 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 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 Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009 Why do we need shading

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

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 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 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 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 ? (see hall of fame…) 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 Global Effects translucent surface shadow multiple reflection E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012

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 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 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 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 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 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 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 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’=( , , ) v’=(3.0,4.0,2.0) then we normalize to obtain a unit vector v…

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’=( , , ) l’=(9.0,14.0,12.0) then we normalize to obtain a unit vector l…

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 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 Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009 Let’s derive the first term of the Phong model

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

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

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

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

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