1 illumination and shading day 6, 2013 © jeff parker
TRANSCRIPT
1
Illumination and Shading
Day 6, 2013
© Jeff Parker
2
Outline
Gallery
Goal all Semester: Realistic images
Review lighting in the real world
Types of illumination
Shading Strategies
Shading Algorithms
Limitations of shading algorithms
Alternatives
3
Gallery
4
DanChris
Fixfunction perspective( fovy, aspect, near, far )
{ // Polina's fix
var f = 1.0 / Math.tan( radians(fovy) / 2 );
// var d = far - near;
var d = -(far - near);
var result = mat4();
result[0][0] = f / aspect;
result[1][1] = f;
result[2][2] = (near + far) / d;
result[2][3] = 2 * near * far / d;
result[3][2] = -1;
result[3][3] = 0.0;
return result;
}
The on-line version has been revised
6
Outline
Goal in Computer Graphics is to make something good enough to use
For design work
For entertainment
For instruction
…
Nothing we have done so far looks "real"
Tonight we will take a big step forward - lighting
7
Mike
8
Derrick
9
Dan
10
Outline
Gallery
Goal all Semester: Realistic images
Review lighting in the real world
Types of illumination
Shading Strategies
Shading Algorithms
Limitations of shading algorithms
Alternatives
11
Examples
We start by looking at light in some photosWhat do you see?
12
Examples
13
Examples
14
Examples
Luxo Jr
Pixar's first movie
http://www.youtube.com/watch?v=Hrnz2pg3YPg
Spectrum
Light is visible electromagnetic radiation
17
Observations
Light is generated by a source
Sun, Light bulb, phosphorescence,…
Light travels through space, air, glass, water…
Travels in straight line – may bend at boundaries
When light strikes object some wavelengths are absorbed, and some are reflected
The reflected light travels through air, glass, …
Some of the reflected light reaches our eyes
18
Lambert's Law
Different types of finish
Matt vs. glossy
Smooth, bumpy, brushed
Most surfaces are matt: many man made surfaces are smooth
Lambertian – luminance is isotropic
Looks the same from every viewpoint
Luminance depends on angle of incidence
Sunlight is strong in summer, weak in winter
19
Snell's law
Snell's law decribes how light bends moving from one medium to another
€
sinθ1
sinθ2
=n1
n2
20
Fresnel's law
21
Milestones
Hooke (1665) – Light is rapid vibration (wave)
Newton (1666) – Light is a corpuscle (particle)
Young (1801) – Double-Slit experiment - wave
Maxwell (1860) – Electromagnetic disturbance
Einstein (1905) – Photoelectric effect - Light comes in discrete quanta (photons) – 1921 Nobel Prize
Quantum Mechanics – Light is both particle and wave
22
Wave or Particle?
Experimental evidence for the two theories
Phenomenon Wave Particle
Reflection yes yes
Refraction yes yes
Interference yes no
Diffraction yes no
Polarization yes no
Photoelectric Effect no yes
23
Human sensitivity
The cones sense different wavelengths
The original version of the Retinylidene protein is thought to have been tuned for green light
24
Spectrum of sources
Compare incandescent to sunlight
25
Halogen Bulb
Fresnell's law extends Snell's law
Refraction is often accompanied by reflection
26
Blacklight
Compare incandescent to sunlight
27
Fluorescent Bulb
Fresnell's law extends Snell's law
Refraction is often accompanied by reflection
28
Takeaway
Different light sources emit different spectra
The same scene looks different under different light
OpenGL gives you control over your light source's spectrum
29
Light Sources
As well as direct light, there are many indirect sources
We call this ambient light
Other points get direct illumination
30
Point source
Some lights are from a radial point source
Light bulb: rays radiate
Some sources are directional – all the rays are ~ parallel
This is an ideal model – best approximation for distant sources
31
Other Light Sources
Spot Lights
Area light source
A 2D area emits light
Soft shadows
Extended light source
Spherical Light source (3D)
Soft shadows
32
Hard and Soft Shadows
Hard shadows are created by point sources
33
Shadows
Shadows are important in creating atmosphere
34
Putting it together
The illumination of a scene is made of two parts
The light sources
Emitted spectrum
Geometry (position and direction)
Attenuation – energy decreases with distance
Surface
Reflectance spectrum
Geometry
Absorption
35
Shading options
We will look at alternative forms of shading
36
Shading options
We will look at alternative forms of shading
37
Shading options
The Quest for Realism (Jim Blinn, 1980)
A brief history of lighting in Computer Graphics
http://www.youtube.com/watch?v=pbSBUEH0PYo
38
Reflectance Models
We will break down light into three components
Ambient Light
Diffuse light – point light source, matt finish
Specular – point light source, glossy finish
Each component will have three sub-components
Red, Green, Blue – 9 values in all
39
Diffuse Light: Matt surface
A Lambertian surface (e.g. unfinished wood) has the same brightness, whatever the viewer's angle.
Not all patches of a matt surface have the same brightness:
it depends upon position of light source
The Diffuse Intensity (ID) is equal to the cosine of the angle between the Normal vector N and the vector towards the light, L, multiplied by the Intensity of the light, IL.
L and N are assumed to be of unit length (normalized)
€
ID = L ⋅NIL
40
Diffuse Light: Matt surface
This is a step forward – can tell where the light is
But we see the edges of the patches
€
ID = L ⋅NIL
41
GouraudHenri Gouraud, 1971, PhD University of Utah
Interpolate shading over a polygon
Good results without requiring small polygons
Start with normal vector for each polygon
At each vertex, average incident normals to get per-vertex "normal"
Use "vertex normals" to compute color for each vertex
Interpolate colors across each face
Sylvie Gouraud
42
PhongBui Tuong Phong, 1973, PhD University of Utah
Interpolate shading over a polygon
Start with normal vector for each polygon
At each vertex, average incident normals to get per-vertex "normal"
Interpolate normals across faces
Use the interpolated normal to compute the color
Gouraud shading: Compute normals at each vertex, compute color
Then interpolate color for each fragment
Phong shading: have a unique normal at each fragment
Compute normal at each vertex, as before
Interpolate normals across face
Fresh computation of color from normal at each fragment
Thus a per fragment computation
43
Specular Reflections
Bui Tuong Phong, 1973, PhD University of Utah
Approximate the specular highlights on a surface
Bi-Directional Reflectance Distribution Function (BRDF)
44
BRDF sampling
Special purpose hardware to sample BRDF
45
BRDF sampling
Sample values
46
LightPosition
47
LightMaterial
48
Specular Highlights
For specular component, we use 4 vectors at each point
l Light: points towards light
v Viewer: points towards viewer
n Normal to the point
r Reflector: Where light would bounce
49
Specular Highlight
Phong added a specular term
Strong as vector v approaches reflected vector r, drops off as they differ (angle phi)
Ir = Reflected Intensity
ks = Absorption coef
I = Incoming Intensity
alpha = shininess coef
€
Ir ≈ ks I cosα φ
Ir ≈ ks I(v ⋅r)α φ
50
Computing Reflector r
The angle of reflection must equal the angle of incidence
The three vectors should be co-planar
€
r + l
2= (l ⋅n)n
r + l = 2(l ⋅n)n
r = 2(l ⋅n)n − l
51
Shininess Coef
Metals have small specular reflection – large alpha (100-200)
Plastics have wide specular reflection – smaller alpha (5-10)
€
Ir ≈ ks I(v ⋅r)α φ
52
Blinn-Phong
Jim Blinn proposed alternative to Phong model
Approximate the angle phi
Uses h, the "halfway" vector midway between l and v
The new angle psi is half phi if all vectors are coplanar.
Given alpha, we find matching power beta.
OpenGL uses Flat or Gouraud with Blinn-Phong shading
€
h =(l + v)
| l + v |
€
Ir ≈ ks I(h ⋅n)β φ
53
Why is this any better?
If we are using Phong shading, the normal n varies as we interpolate over each polygon.
As n changes, we must recompute the vector r
Given direct light and a distant eye, l and v do not change, or do not change as quickly.
We can quickly compute a dot product on the fly as n varies
€
Ir ≈ ks I(h ⋅n)β φ
54
Distance Term
Light from distant source is inversely proportional to the distance squared
We can add a term of the form 1/(a + bd + cd2)
55
Light Sources
We add together the effects of the three forms of light (Ambient, Diffuse, Specular) over the three colors
This gives us 9 terms {d, s, a} x {r, g, b}
€
Idr , Idg , Idb, I sr , I sg , I sb , Iar , Iag , Iab
56
Material Properties
Each material can be configured to react distinctly to each type of light, and to each color
Gives us 9 absorption coefficients and one shineness coefficient alpha
€
kdr , kdg , kdb, ksr , ksg , ksb , kar , kag , kab
57
Phong Illumination Model
For each light source, and for each color component, the Phong model gives the following equation
For each color, we add up the contributions from all lights
€
I = ka Ia + kd Idl ⋅n + ks I s (v ⋅r)α
58
Compare
Phong vs Blinn-Phong
Example
59
teapots.c
from The Redbook
Single light
variety of material parameters
Example
60
material.c
from The Redbook
Single light
variety of material parameters
See next page…
61
* The spheres in the first row have materials with no ambient reflection.
* The second row has materials with significant ambient reflection.
* The third row has materials with colored ambient reflection.
* The first column has materials with blue, diffuse reflection only.
* The second column has blue diffuse reflection, as well as specular
* reflection with a low shininess exponent.
* The third column has blue diffuse reflection, as well as specular
* reflection with a high shininess exponent (a more concentrated highlight).
* The fourth column has materials which also include an emissive component.
* glTranslatef() is used to move spheres to their appropriate locations.
Light
// Initialize shader lighting parameters in .js
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 );
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;
62
Gloss
// Point source: RHS is a point
var lightPosition = vec4(1.0, 1.0, 1.0, 1.0 );
// Directional source: RHS is a vector
var lightPosition = vec4(1.0, 1.0, 1.0, 0.0 );
63
LightambientProduct = mult(lightAmbient, materialAmbient);
diffuseProduct = mult(lightDiffuse, materialDiffuse);
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);
gl.uniformMatrix4fv( gl.getUniformLocation(program, "projectionMatrix"), false, flatten(projection));
Vertex Shader for Sphere 1<script id="vertex-shader" type="x-shader/x-vertex">
attribute vec4 vPosition;
attribute vec4 vNormal;
varying vec4 fColor;
uniform vec4 ambientProduct, diffuseProduct, specularProduct;
uniform mat4 modelViewMatrix;
uniform mat4 projectionMatrix;
uniform vec4 lightPosition;
uniform float shininess;
void main()
{
vec3 pos = -(modelViewMatrix * vPosition).xyz;
vec3 light = lightPosition.xyz;
vec3 L = normalize( light - pos );
vec3 E = normalize( -pos );
vec3 H = normalize( L + E );
// Transform vertex normal into eye coordinates
vec3 N = normalize( (modelViewMatrix*vNormal).xyz);
// Compute terms in the illumination equation
vec4 ambient = ambientProduct;
float Kd = max( dot(L, N), 0.0 );
vec4 diffuse = Kd*diffuseProduct;
float Ks = pow( max(dot(N, H), 0.0), shininess );
vec4 specular = Ks * specularProduct;
if( dot(L, N) < 0.0 ) {
specular = vec4(0.0, 0.0, 0.0, 1.0);
}
gl_Position = projectionMatrix * modelViewMatrix * vPosition;
fColor = ambient + diffuse +specular;
fColor.a = 1.0;
}
65
Fragment Shader for Sphere 1
<script id="fragment-shader" type="x-shader/x-fragment">
precision mediump float;
varying vec4 fColor;
void main()
{
gl_FragColor = fColor;
}
</script>
Vertex Shader for Sphere 2
<script id="vertex-shader" type="x-shader/x-vertex">
attribute vec4 vPosition;
attribute vec4 vNormal;
varying vec3 N, L, E;
uniform mat4 modelViewMatrix;
uniform mat4 projectionMatrix;
uniform vec4 lightPosition;
void main()
{
vec3 pos = -(modelViewMatrix * vPosition).xyz;
vec3 light = lightPosition.xyz;
L = normalize( light - pos );
E = -pos;
N = normalize( (modelViewMatrix*vNormal).xyz);
gl_Position = projectionMatrix * modelViewMatrix * vPosition;
}
</script>
67
Fragment Shader for Sphere 2<script id="fragment-shader" type="x-shader/x-fragment">
precision mediump float;
uniform vec4 ambientProduct;
uniform vec4 diffuseProduct;
uniform vec4 specularProduct;
uniform float shininess;
varying vec3 N, L, E;
void main()
{
vec4 fColor;
vec3 H = normalize( L + E );
vec4 ambient = ambientProduct;
float Kd = max( dot(L, N), 0.0 );
vec4 diffuse = Kd*diffuseProduct;
float Ks = pow( max(dot(N, H), 0.0), shininess );
vec4 specular = Ks * specularProduct;
if( dot(L, N) < 0.0 ) {
specular = vec4(0.0, 0.0, 0.0, 1.0);
}
fColor = ambient + diffuse +specular;
fColor.a = 1.0;
gl_FragColor = fColor;
}
</script>
Vertex Shader for 1
<script id="vertex-shader" type="x-shader/x-vertex">
attribute vec4 vPosition;
attribute vec4 vNormal;
varying vec4 fColor;
uniform vec4 ambientProduct, diffuseProduct, specularProduct;
uniform mat4 modelViewMatrix;
uniform mat4 projectionMatrix;
uniform vec4 lightPosition;
uniform float shininess;
Vertex Shader for 1
void main()
{
vec3 pos = -(modelViewMatrix * vPosition).xyz;
vec3 light = lightPosition.xyz;
vec3 L = normalize( light - pos );
vec3 E = normalize( -pos ); // Eye
vec3 H = normalize( L + E );
// Transform vertex normal into eye coordinates
vec3 N = normalize( (modelViewMatrix*vNormal).xyz);
// Compute terms in the illumination equation
vec4 ambient = ambientProduct;
Vertex Shader for 1
float Kd = max( dot(L, N), 0.0 );
vec4 diffuse = Kd*diffuseProduct;
float Ks = pow( max(dot(N, H), 0.0), shininess );
vec4 specular = Ks * specularProduct;
if ( dot(L, N) < 0.0 ) {
specular = vec4(0.0, 0.0, 0.0, 1.0);
}
gl_Position = projectionMatrix * modelViewMatrix * vPosition;
fColor = ambient + diffuse + specular;
fColor.a = 1.0;
}
Fragment Shader for Sphere 1
<script id="fragment-shader" type="x-shader/x-fragment">
precision mediump float;
varying vec4 fColor;
void main()
{
gl_FragColor = fColor;
}
</script>
Vertex Shader for Sphere 2
<script id="vertex-shader" type="x-shader/x-vertex">
...
void main()
{
vec3 pos = -(modelViewMatrix * vPosition).xyz;
vec3 light = lightPosition.xyz;
L = normalize( light - pos );
E = -pos;
N = normalize( (modelViewMatrix*vNormal).xyz);
gl_Position = projectionMatrix * modelViewMatrix * vPosition;
}
</script>
73
Fragment Shader for 2
<script id="fragment-shader" type="x-shader/x-fragment">
precision mediump float;
uniform vec4 ambientProduct;
uniform vec4 diffuseProduct;
uniform vec4 specularProduct;
uniform float shininess;
varying vec3 N, L, E;
void main() {
vec4 fColor;
vec3 H = normalize( L + E );
vec4 ambient = ambientProduct;
Fragment Shader for 2 float Kd = max( dot(L, N), 0.0 );
vec4 diffuse = Kd*diffuseProduct;
float Ks = pow( max(dot(N, H), 0.0), shininess );
vec4 specular = Ks * specularProduct;
if ( dot(L, N) < 0.0 ) {
specular = vec4(0.0, 0.0, 0.0, 1.0);
}
fColor = ambient + diffuse + specular;
fColor.a = 1.0;
gl_FragColor = fColor;
}
</script>
Difference in JavaScript 1 & 2
function triangle(a, b, c)
{
normalsArray.push(a);
normalsArray.push(b);
normalsArray.push(c);
pointsArray.push(a);
pointsArray.push(b);
pointsArray.push(c);
index += 3;
}
The essential difference is how we compute normals
special case: normal @ p for sphere at origin is p
Difference in JavaScript 3 & 4
function triangle(a, b, c)
{
var t1 = subtract(b, a);
var t2 = subtract(c, a);
var normal = normalize(cross(t1, t2));
normal = vec4(normal);
normalsArray.push(normal);
normalsArray.push(normal);
normalsArray.push(normal);
... p0
p1
p2
n
p
Early Fragment Test
Don't perform full computation for fragments we will cull
Early Fragment Test
Don't perform full computation for fragments we will cull
Two passes over fragments
First pass computes the depth
Second pass checks the depth: if this fragment is live, it computes the color
Don't need to write to depth buffer in second pass
Homework
Cube Rotations
Lost World – check out Karl Sim's Evolved Virtual Life
80
Conclusion
Lighting is difficult
There are techniques that model reality
The implementations often simplify reality to achieve speed
We have looked at the most common model
Purely local: for example, does not create shadows, refraction, reflections, caustics, …
For other effects, need fancier shaders or Ray Tracing
81