1 Illumination and Shading Day 6, 2013 © Jeff Parker.
-
Upload
sophia-garrett -
Category
Documents
-
view
222 -
download
0
Transcript of 1 Illumination and Shading Day 6, 2013 © Jeff Parker.
![Page 1: 1 Illumination and Shading Day 6, 2013 © Jeff Parker.](https://reader034.fdocuments.in/reader034/viewer/2022051214/56649ecf5503460f94bdd54d/html5/thumbnails/1.jpg)
1
Illumination and Shading
Day 6, 2013
© Jeff Parker
![Page 2: 1 Illumination and Shading Day 6, 2013 © Jeff Parker.](https://reader034.fdocuments.in/reader034/viewer/2022051214/56649ecf5503460f94bdd54d/html5/thumbnails/2.jpg)
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
![Page 3: 1 Illumination and Shading Day 6, 2013 © Jeff Parker.](https://reader034.fdocuments.in/reader034/viewer/2022051214/56649ecf5503460f94bdd54d/html5/thumbnails/3.jpg)
3
Gallery
![Page 4: 1 Illumination and Shading Day 6, 2013 © Jeff Parker.](https://reader034.fdocuments.in/reader034/viewer/2022051214/56649ecf5503460f94bdd54d/html5/thumbnails/4.jpg)
4
DanChris
![Page 5: 1 Illumination and Shading Day 6, 2013 © Jeff Parker.](https://reader034.fdocuments.in/reader034/viewer/2022051214/56649ecf5503460f94bdd54d/html5/thumbnails/5.jpg)
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
![Page 6: 1 Illumination and Shading Day 6, 2013 © Jeff Parker.](https://reader034.fdocuments.in/reader034/viewer/2022051214/56649ecf5503460f94bdd54d/html5/thumbnails/6.jpg)
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
![Page 7: 1 Illumination and Shading Day 6, 2013 © Jeff Parker.](https://reader034.fdocuments.in/reader034/viewer/2022051214/56649ecf5503460f94bdd54d/html5/thumbnails/7.jpg)
7
Mike
![Page 8: 1 Illumination and Shading Day 6, 2013 © Jeff Parker.](https://reader034.fdocuments.in/reader034/viewer/2022051214/56649ecf5503460f94bdd54d/html5/thumbnails/8.jpg)
8
Derrick
![Page 9: 1 Illumination and Shading Day 6, 2013 © Jeff Parker.](https://reader034.fdocuments.in/reader034/viewer/2022051214/56649ecf5503460f94bdd54d/html5/thumbnails/9.jpg)
9
Dan
![Page 10: 1 Illumination and Shading Day 6, 2013 © Jeff Parker.](https://reader034.fdocuments.in/reader034/viewer/2022051214/56649ecf5503460f94bdd54d/html5/thumbnails/10.jpg)
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
![Page 11: 1 Illumination and Shading Day 6, 2013 © Jeff Parker.](https://reader034.fdocuments.in/reader034/viewer/2022051214/56649ecf5503460f94bdd54d/html5/thumbnails/11.jpg)
11
Examples
We start by looking at light in some photosWhat do you see?
![Page 12: 1 Illumination and Shading Day 6, 2013 © Jeff Parker.](https://reader034.fdocuments.in/reader034/viewer/2022051214/56649ecf5503460f94bdd54d/html5/thumbnails/12.jpg)
12
Examples
![Page 13: 1 Illumination and Shading Day 6, 2013 © Jeff Parker.](https://reader034.fdocuments.in/reader034/viewer/2022051214/56649ecf5503460f94bdd54d/html5/thumbnails/13.jpg)
13
Examples
![Page 14: 1 Illumination and Shading Day 6, 2013 © Jeff Parker.](https://reader034.fdocuments.in/reader034/viewer/2022051214/56649ecf5503460f94bdd54d/html5/thumbnails/14.jpg)
14
Examples
![Page 15: 1 Illumination and Shading Day 6, 2013 © Jeff Parker.](https://reader034.fdocuments.in/reader034/viewer/2022051214/56649ecf5503460f94bdd54d/html5/thumbnails/15.jpg)
Luxo Jr
Pixar's first movie
http://www.youtube.com/watch?v=Hrnz2pg3YPg
![Page 16: 1 Illumination and Shading Day 6, 2013 © Jeff Parker.](https://reader034.fdocuments.in/reader034/viewer/2022051214/56649ecf5503460f94bdd54d/html5/thumbnails/16.jpg)
Spectrum
Light is visible electromagnetic radiation
![Page 17: 1 Illumination and Shading Day 6, 2013 © Jeff Parker.](https://reader034.fdocuments.in/reader034/viewer/2022051214/56649ecf5503460f94bdd54d/html5/thumbnails/17.jpg)
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
![Page 18: 1 Illumination and Shading Day 6, 2013 © Jeff Parker.](https://reader034.fdocuments.in/reader034/viewer/2022051214/56649ecf5503460f94bdd54d/html5/thumbnails/18.jpg)
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
![Page 19: 1 Illumination and Shading Day 6, 2013 © Jeff Parker.](https://reader034.fdocuments.in/reader034/viewer/2022051214/56649ecf5503460f94bdd54d/html5/thumbnails/19.jpg)
19
Snell's law
Snell's law decribes how light bends moving from one medium to another
€
sinθ1
sinθ2
=n1
n2
![Page 20: 1 Illumination and Shading Day 6, 2013 © Jeff Parker.](https://reader034.fdocuments.in/reader034/viewer/2022051214/56649ecf5503460f94bdd54d/html5/thumbnails/20.jpg)
20
Fresnel's law
![Page 21: 1 Illumination and Shading Day 6, 2013 © Jeff Parker.](https://reader034.fdocuments.in/reader034/viewer/2022051214/56649ecf5503460f94bdd54d/html5/thumbnails/21.jpg)
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
![Page 22: 1 Illumination and Shading Day 6, 2013 © Jeff Parker.](https://reader034.fdocuments.in/reader034/viewer/2022051214/56649ecf5503460f94bdd54d/html5/thumbnails/22.jpg)
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
![Page 23: 1 Illumination and Shading Day 6, 2013 © Jeff Parker.](https://reader034.fdocuments.in/reader034/viewer/2022051214/56649ecf5503460f94bdd54d/html5/thumbnails/23.jpg)
23
Human sensitivity
The cones sense different wavelengths
The original version of the Retinylidene protein is thought to have been tuned for green light
![Page 24: 1 Illumination and Shading Day 6, 2013 © Jeff Parker.](https://reader034.fdocuments.in/reader034/viewer/2022051214/56649ecf5503460f94bdd54d/html5/thumbnails/24.jpg)
24
Spectrum of sources
Compare incandescent to sunlight
![Page 25: 1 Illumination and Shading Day 6, 2013 © Jeff Parker.](https://reader034.fdocuments.in/reader034/viewer/2022051214/56649ecf5503460f94bdd54d/html5/thumbnails/25.jpg)
25
Halogen Bulb
Fresnell's law extends Snell's law
Refraction is often accompanied by reflection
![Page 26: 1 Illumination and Shading Day 6, 2013 © Jeff Parker.](https://reader034.fdocuments.in/reader034/viewer/2022051214/56649ecf5503460f94bdd54d/html5/thumbnails/26.jpg)
26
Blacklight
Compare incandescent to sunlight
![Page 27: 1 Illumination and Shading Day 6, 2013 © Jeff Parker.](https://reader034.fdocuments.in/reader034/viewer/2022051214/56649ecf5503460f94bdd54d/html5/thumbnails/27.jpg)
27
Fluorescent Bulb
Fresnell's law extends Snell's law
Refraction is often accompanied by reflection
![Page 28: 1 Illumination and Shading Day 6, 2013 © Jeff Parker.](https://reader034.fdocuments.in/reader034/viewer/2022051214/56649ecf5503460f94bdd54d/html5/thumbnails/28.jpg)
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
![Page 29: 1 Illumination and Shading Day 6, 2013 © Jeff Parker.](https://reader034.fdocuments.in/reader034/viewer/2022051214/56649ecf5503460f94bdd54d/html5/thumbnails/29.jpg)
29
Light Sources
As well as direct light, there are many indirect sources
We call this ambient light
Other points get direct illumination
![Page 30: 1 Illumination and Shading Day 6, 2013 © Jeff Parker.](https://reader034.fdocuments.in/reader034/viewer/2022051214/56649ecf5503460f94bdd54d/html5/thumbnails/30.jpg)
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
![Page 31: 1 Illumination and Shading Day 6, 2013 © Jeff Parker.](https://reader034.fdocuments.in/reader034/viewer/2022051214/56649ecf5503460f94bdd54d/html5/thumbnails/31.jpg)
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
![Page 32: 1 Illumination and Shading Day 6, 2013 © Jeff Parker.](https://reader034.fdocuments.in/reader034/viewer/2022051214/56649ecf5503460f94bdd54d/html5/thumbnails/32.jpg)
32
Hard and Soft Shadows
Hard shadows are created by point sources
![Page 33: 1 Illumination and Shading Day 6, 2013 © Jeff Parker.](https://reader034.fdocuments.in/reader034/viewer/2022051214/56649ecf5503460f94bdd54d/html5/thumbnails/33.jpg)
33
Shadows
Shadows are important in creating atmosphere
![Page 34: 1 Illumination and Shading Day 6, 2013 © Jeff Parker.](https://reader034.fdocuments.in/reader034/viewer/2022051214/56649ecf5503460f94bdd54d/html5/thumbnails/34.jpg)
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
![Page 35: 1 Illumination and Shading Day 6, 2013 © Jeff Parker.](https://reader034.fdocuments.in/reader034/viewer/2022051214/56649ecf5503460f94bdd54d/html5/thumbnails/35.jpg)
35
Shading options
We will look at alternative forms of shading
![Page 36: 1 Illumination and Shading Day 6, 2013 © Jeff Parker.](https://reader034.fdocuments.in/reader034/viewer/2022051214/56649ecf5503460f94bdd54d/html5/thumbnails/36.jpg)
36
Shading options
We will look at alternative forms of shading
![Page 37: 1 Illumination and Shading Day 6, 2013 © Jeff Parker.](https://reader034.fdocuments.in/reader034/viewer/2022051214/56649ecf5503460f94bdd54d/html5/thumbnails/37.jpg)
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
![Page 38: 1 Illumination and Shading Day 6, 2013 © Jeff Parker.](https://reader034.fdocuments.in/reader034/viewer/2022051214/56649ecf5503460f94bdd54d/html5/thumbnails/38.jpg)
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
![Page 39: 1 Illumination and Shading Day 6, 2013 © Jeff Parker.](https://reader034.fdocuments.in/reader034/viewer/2022051214/56649ecf5503460f94bdd54d/html5/thumbnails/39.jpg)
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
![Page 40: 1 Illumination and Shading Day 6, 2013 © Jeff Parker.](https://reader034.fdocuments.in/reader034/viewer/2022051214/56649ecf5503460f94bdd54d/html5/thumbnails/40.jpg)
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
![Page 41: 1 Illumination and Shading Day 6, 2013 © Jeff Parker.](https://reader034.fdocuments.in/reader034/viewer/2022051214/56649ecf5503460f94bdd54d/html5/thumbnails/41.jpg)
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
![Page 42: 1 Illumination and Shading Day 6, 2013 © Jeff Parker.](https://reader034.fdocuments.in/reader034/viewer/2022051214/56649ecf5503460f94bdd54d/html5/thumbnails/42.jpg)
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
![Page 43: 1 Illumination and Shading Day 6, 2013 © Jeff Parker.](https://reader034.fdocuments.in/reader034/viewer/2022051214/56649ecf5503460f94bdd54d/html5/thumbnails/43.jpg)
43
Specular Reflections
Bui Tuong Phong, 1973, PhD University of Utah
Approximate the specular highlights on a surface
Bi-Directional Reflectance Distribution Function (BRDF)
![Page 44: 1 Illumination and Shading Day 6, 2013 © Jeff Parker.](https://reader034.fdocuments.in/reader034/viewer/2022051214/56649ecf5503460f94bdd54d/html5/thumbnails/44.jpg)
44
BRDF sampling
Special purpose hardware to sample BRDF
![Page 45: 1 Illumination and Shading Day 6, 2013 © Jeff Parker.](https://reader034.fdocuments.in/reader034/viewer/2022051214/56649ecf5503460f94bdd54d/html5/thumbnails/45.jpg)
45
BRDF sampling
Sample values
![Page 46: 1 Illumination and Shading Day 6, 2013 © Jeff Parker.](https://reader034.fdocuments.in/reader034/viewer/2022051214/56649ecf5503460f94bdd54d/html5/thumbnails/46.jpg)
46
LightPosition
![Page 47: 1 Illumination and Shading Day 6, 2013 © Jeff Parker.](https://reader034.fdocuments.in/reader034/viewer/2022051214/56649ecf5503460f94bdd54d/html5/thumbnails/47.jpg)
47
LightMaterial
![Page 48: 1 Illumination and Shading Day 6, 2013 © Jeff Parker.](https://reader034.fdocuments.in/reader034/viewer/2022051214/56649ecf5503460f94bdd54d/html5/thumbnails/48.jpg)
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
![Page 49: 1 Illumination and Shading Day 6, 2013 © Jeff Parker.](https://reader034.fdocuments.in/reader034/viewer/2022051214/56649ecf5503460f94bdd54d/html5/thumbnails/49.jpg)
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)α φ
![Page 50: 1 Illumination and Shading Day 6, 2013 © Jeff Parker.](https://reader034.fdocuments.in/reader034/viewer/2022051214/56649ecf5503460f94bdd54d/html5/thumbnails/50.jpg)
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
![Page 51: 1 Illumination and Shading Day 6, 2013 © Jeff Parker.](https://reader034.fdocuments.in/reader034/viewer/2022051214/56649ecf5503460f94bdd54d/html5/thumbnails/51.jpg)
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)α φ
![Page 52: 1 Illumination and Shading Day 6, 2013 © Jeff Parker.](https://reader034.fdocuments.in/reader034/viewer/2022051214/56649ecf5503460f94bdd54d/html5/thumbnails/52.jpg)
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)β φ
![Page 53: 1 Illumination and Shading Day 6, 2013 © Jeff Parker.](https://reader034.fdocuments.in/reader034/viewer/2022051214/56649ecf5503460f94bdd54d/html5/thumbnails/53.jpg)
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)β φ
![Page 54: 1 Illumination and Shading Day 6, 2013 © Jeff Parker.](https://reader034.fdocuments.in/reader034/viewer/2022051214/56649ecf5503460f94bdd54d/html5/thumbnails/54.jpg)
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)
![Page 55: 1 Illumination and Shading Day 6, 2013 © Jeff Parker.](https://reader034.fdocuments.in/reader034/viewer/2022051214/56649ecf5503460f94bdd54d/html5/thumbnails/55.jpg)
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
![Page 56: 1 Illumination and Shading Day 6, 2013 © Jeff Parker.](https://reader034.fdocuments.in/reader034/viewer/2022051214/56649ecf5503460f94bdd54d/html5/thumbnails/56.jpg)
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
![Page 57: 1 Illumination and Shading Day 6, 2013 © Jeff Parker.](https://reader034.fdocuments.in/reader034/viewer/2022051214/56649ecf5503460f94bdd54d/html5/thumbnails/57.jpg)
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)α
![Page 58: 1 Illumination and Shading Day 6, 2013 © Jeff Parker.](https://reader034.fdocuments.in/reader034/viewer/2022051214/56649ecf5503460f94bdd54d/html5/thumbnails/58.jpg)
58
Compare
Phong vs Blinn-Phong
![Page 59: 1 Illumination and Shading Day 6, 2013 © Jeff Parker.](https://reader034.fdocuments.in/reader034/viewer/2022051214/56649ecf5503460f94bdd54d/html5/thumbnails/59.jpg)
Example
59
teapots.c
from The Redbook
Single light
variety of material parameters
![Page 60: 1 Illumination and Shading Day 6, 2013 © Jeff Parker.](https://reader034.fdocuments.in/reader034/viewer/2022051214/56649ecf5503460f94bdd54d/html5/thumbnails/60.jpg)
Example
60
material.c
from The Redbook
Single light
variety of material parameters
See next page…
![Page 61: 1 Illumination and Shading Day 6, 2013 © Jeff Parker.](https://reader034.fdocuments.in/reader034/viewer/2022051214/56649ecf5503460f94bdd54d/html5/thumbnails/61.jpg)
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.
![Page 62: 1 Illumination and Shading Day 6, 2013 © Jeff Parker.](https://reader034.fdocuments.in/reader034/viewer/2022051214/56649ecf5503460f94bdd54d/html5/thumbnails/62.jpg)
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
![Page 63: 1 Illumination and Shading Day 6, 2013 © Jeff Parker.](https://reader034.fdocuments.in/reader034/viewer/2022051214/56649ecf5503460f94bdd54d/html5/thumbnails/63.jpg)
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
![Page 64: 1 Illumination and Shading Day 6, 2013 © Jeff Parker.](https://reader034.fdocuments.in/reader034/viewer/2022051214/56649ecf5503460f94bdd54d/html5/thumbnails/64.jpg)
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));
![Page 65: 1 Illumination and Shading Day 6, 2013 © Jeff Parker.](https://reader034.fdocuments.in/reader034/viewer/2022051214/56649ecf5503460f94bdd54d/html5/thumbnails/65.jpg)
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
![Page 66: 1 Illumination and Shading Day 6, 2013 © Jeff Parker.](https://reader034.fdocuments.in/reader034/viewer/2022051214/56649ecf5503460f94bdd54d/html5/thumbnails/66.jpg)
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>
![Page 67: 1 Illumination and Shading Day 6, 2013 © Jeff Parker.](https://reader034.fdocuments.in/reader034/viewer/2022051214/56649ecf5503460f94bdd54d/html5/thumbnails/67.jpg)
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
![Page 68: 1 Illumination and Shading Day 6, 2013 © Jeff Parker.](https://reader034.fdocuments.in/reader034/viewer/2022051214/56649ecf5503460f94bdd54d/html5/thumbnails/68.jpg)
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>
![Page 69: 1 Illumination and Shading Day 6, 2013 © Jeff Parker.](https://reader034.fdocuments.in/reader034/viewer/2022051214/56649ecf5503460f94bdd54d/html5/thumbnails/69.jpg)
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;
![Page 70: 1 Illumination and Shading Day 6, 2013 © Jeff Parker.](https://reader034.fdocuments.in/reader034/viewer/2022051214/56649ecf5503460f94bdd54d/html5/thumbnails/70.jpg)
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;
![Page 71: 1 Illumination and Shading Day 6, 2013 © Jeff Parker.](https://reader034.fdocuments.in/reader034/viewer/2022051214/56649ecf5503460f94bdd54d/html5/thumbnails/71.jpg)
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;
}
![Page 72: 1 Illumination and Shading Day 6, 2013 © Jeff Parker.](https://reader034.fdocuments.in/reader034/viewer/2022051214/56649ecf5503460f94bdd54d/html5/thumbnails/72.jpg)
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>
![Page 73: 1 Illumination and Shading Day 6, 2013 © Jeff Parker.](https://reader034.fdocuments.in/reader034/viewer/2022051214/56649ecf5503460f94bdd54d/html5/thumbnails/73.jpg)
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
![Page 74: 1 Illumination and Shading Day 6, 2013 © Jeff Parker.](https://reader034.fdocuments.in/reader034/viewer/2022051214/56649ecf5503460f94bdd54d/html5/thumbnails/74.jpg)
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;
![Page 75: 1 Illumination and Shading Day 6, 2013 © Jeff Parker.](https://reader034.fdocuments.in/reader034/viewer/2022051214/56649ecf5503460f94bdd54d/html5/thumbnails/75.jpg)
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>
![Page 76: 1 Illumination and Shading Day 6, 2013 © Jeff Parker.](https://reader034.fdocuments.in/reader034/viewer/2022051214/56649ecf5503460f94bdd54d/html5/thumbnails/76.jpg)
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
![Page 77: 1 Illumination and Shading Day 6, 2013 © Jeff Parker.](https://reader034.fdocuments.in/reader034/viewer/2022051214/56649ecf5503460f94bdd54d/html5/thumbnails/77.jpg)
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
![Page 78: 1 Illumination and Shading Day 6, 2013 © Jeff Parker.](https://reader034.fdocuments.in/reader034/viewer/2022051214/56649ecf5503460f94bdd54d/html5/thumbnails/78.jpg)
Early Fragment Test
Don't perform full computation for fragments we will cull
![Page 79: 1 Illumination and Shading Day 6, 2013 © Jeff Parker.](https://reader034.fdocuments.in/reader034/viewer/2022051214/56649ecf5503460f94bdd54d/html5/thumbnails/79.jpg)
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
![Page 80: 1 Illumination and Shading Day 6, 2013 © Jeff Parker.](https://reader034.fdocuments.in/reader034/viewer/2022051214/56649ecf5503460f94bdd54d/html5/thumbnails/80.jpg)
Homework
Cube Rotations
Lost World – check out Karl Sim's Evolved Virtual Life
80
![Page 81: 1 Illumination and Shading Day 6, 2013 © Jeff Parker.](https://reader034.fdocuments.in/reader034/viewer/2022051214/56649ecf5503460f94bdd54d/html5/thumbnails/81.jpg)
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