Introduction to Computer Graphics with WebGLbackspaces.net/temp/WebGLMoocSlidePDFs/week6.pdf · 4 1...
Transcript of Introduction to Computer Graphics with WebGLbackspaces.net/temp/WebGLMoocSlidePDFs/week6.pdf · 4 1...
1
1
Introduction to Computer Graphics with WebGL
Ed Angel
Classical Viewing
Computer Graphics with WebGL © Ed Angel, 2014
2
Classical Viewing
• Viewing requires three basic elements - One or more objects - A viewer with a projection surface - Projectors that go from the object(s) to the projection
surface • Classical views are based on the relationship among
these elements - The viewer picks up the object and orients it how she
would like to see it • Each object is assumed to constructed from flat
principal faces - Buildings, polyhedra, manufactured objects
Computer Graphics with WebGL © Ed Angel, 2014
3
Planar Geometric Projections
• Standard projections project onto a plane • Projectors are lines that either
- converge at a center of projection - are parallel
• Such projections preserve lines - but not necessarily angles
• Nonplanar projections are needed for applications such as map construction
Computer Graphics with WebGL © Ed Angel, 2014
2
4
Classical Projections
Computer Graphics with WebGL © Ed Angel, 2014
5
Taxonomy of Planar Geometric Projections
parallel perspective
axonometric multiview orthographic
oblique
isometric dimetric trimetric
2 point 1 point 3 point
planar geometric projections
Computer Graphics with WebGL © Ed Angel, 2014
6
Perspective vs Parallel
• Computer graphics treats all projections the same and implements them with a single pipeline
• Classical viewing developed different techniques for drawing each type of projection
• Fundamental distinction is between parallel and perspective viewing even though mathematically parallel viewing is the limit of perspective viewing
Computer Graphics with WebGL © Ed Angel, 2014
3
7
Perspective Projection
Computer Graphics with WebGL © Ed Angel, 2014
8
Parallel Projection
Computer Graphics with WebGL © Ed Angel, 2014
9
Orthographic Projection
Projectors are orthogonal to projection surface
Computer Graphics with WebGL © Ed Angel, 2014
4
10
Multiview Orthographic Projection
• Projection plane parallel to principal face • Usually form front, top, side views
isometric (not multiview orthographic view) front
side top
in CAD and architecture, we often display three multiviews plus isometric
Computer Graphics with WebGL © Ed Angel, 2014
11
Axonometric Projections
Allow projection plane to move relative to object
classify by how many angles of a corner of a projected cube are the same
none: trimetric two: dimetric three: isometric
θ 1
θ 3 θ 2
Computer Graphics with WebGL © Ed Angel, 2014
12
Types of Axonometric Projections
Computer Graphics with WebGL © Ed Angel, 2014
5
13
Oblique Projection
Arbitrary relationship between projectors and projection plane
Computer Graphics with WebGL © Ed Angel, 2014
14
Advantages and Disadvantages
• Can pick the angles to emphasize a particular face
- Architecture: plan oblique, elevation oblique • Angles in faces parallel to projection plane are preserved while we can still see “around” side
• In physical world, cannot create with simple camera; possible with bellows camera or special lens (architectural)
Computer Graphics with WebGL © Ed Angel, 2014
15
Perspective Projection
Projectors coverge at center of projection
Computer Graphics with WebGL © Ed Angel, 2014
6
16
Three-Point Perspective
• No principal face parallel to projection plane • Three vanishing points for cube
Computer Graphics with WebGL © Ed Angel, 2014
17
Two-Point Perspective
• On principal direction parallel to projection plane • Two vanishing points for cube
Computer Graphics with WebGL © Ed Angel, 2014
18
One-Point Perspective
• One principal face parallel to projection plane • One vanishing point for cube
Computer Graphics with WebGL © Ed Angel, 2014
1
1
Introduction to Computer Graphics with WebGL
Ed Angel
Positioning the Camera
Computer Graphics with WebGL © Ed Angel, 2014
From the Beginning
• In the beginning: - fixed function pipeline - Model-View and Projection Transformation - Predefined frames: model, object, camera, clip,
ndc, window • After deprecation
- pipeline with programmable shaders - no transformations - clip, ndc window frames
• MV.js reintroduces original capabilities
2Computer Graphics with WebGL © Ed Angel, 2014
3
Computer Viewing
• There are three aspects of the viewing process, all of which can be implemented in the pipeline,
- Positioning the camera • Setting the model-view matrix
- Selecting a lens • Setting the projection matrix
- Clipping • Setting the view volume
Computer Graphics with WebGL © Ed Angel, 2014
2
4
The WebGL Camera
• In WebGL, initially the object and camera frames are the same
- Default model-view matrix is an identity • The camera is located at origin and points in the
negative z direction • WebGL also specifies a default view volume that is a
cube with sides of length 2 centered at the origin - Default projection matrix is an identity
Computer Graphics with WebGL © Ed Angel, 2014
5
Default Projection
Default projection is orthogonal
clipped out
z=0
2
Computer Graphics with WebGL © Ed Angel, 2014
6
Repositioning the Camera Frame
• If we want to visualize objects with both positive and negative z values we can either
- Move the camera in the positive z direction • Translate the camera frame
- Move the objects in the negative z direction • Translate the world frame
• Both of these views are equivalent and are determined by the model-view matrix
- Need a translation (translate(0.0,0.0,-d);) d > 0
Computer Graphics with WebGL © Ed Angel, 2014
3
7
Moving Camera back from Origin
default frames
frames after translation by –d d > 0
Computer Graphics with WebGL © Ed Angel, 2014
8
Moving the Camera
• We can move the camera to any desired position by a sequence of rotations and translations
• Example: side view - Rotate the camera - Move it away from origin - Model-view matrix C = TR
Computer Graphics with WebGL © Ed Angel, 2014
9
WebGL code
• Remember that last transformation specified is first to be applied
// Using MV.js
var t = translate (0.0, 0.0, -d);var ry = rotateY(90.0);var m = mult(t, ry);
or
var m = mult(translate (0.0, 0.0, -d), rotateY(90.0););
Computer Graphics with WebGL © Ed Angel, 2014
4
10
lookAt lookAt(eye, at, up)
Computer Graphics with WebGL © Ed Angel, 2014
11
The lookAt Function
• The GLU library contained the function gluLookAt to form the required model-view matrix through a simple interface
• Note the need for setting an up direction • Replaced by lookAt() in MV.js
- Can concatenate with modeling transformations • Example: isometric view of cube aligned with axes
var eye = vec3(1.0, 1.0, 1.0);var at = vec3(0.0, 0.0, 0.0);var up = vec3(0.0, 1.0, 0.0);var mv = lookAt(eye, at, up);
Computer Graphics with WebGL © Ed Angel, 2014
12
Other Viewing APIs
• The lookAt function is only one possible API for positioning the camera
• Others include - View reference point, view plane normal, view up
(PHIGS, GKS-3D) - Yaw, pitch, roll - Elevation, azimuth, twist - Direction angles
Computer Graphics with WebGL © Ed Angel, 2014
1
1
Introduction to Computer Graphics with WebGL
Ed Angel
Projection
Computer Graphics with WebGL © Ed Angel, 2014
Basic Vertex Shader
2
attribute vec4 vPosition;attribute vec4 vColor;varying vec4 fColor;uniform mat4 modelViewMatrix;uniform mat4 projectionMatrix;
void main() { gl_Position = projectionMatrix*modelViewMatrix*vPosition; fColor = vColor;}
Computer Graphics with WebGL © Ed Angel, 2014
3
Projection Normalization
• The default projection in the eye (camera) frame is orthogonal
• For points within the default view volume
• Most graphics systems use view normalization - All other views are converted to the default view by
transformations that determine the projection matrix - Allows use of the same pipeline for all views
xp = x yp = y zp = 0
Computer Graphics with WebGL © Ed Angel, 2014
2
4
Homogeneous Coordinate Representation
xp = x yp = y zp = 0 wp = 1
pp = Mp
M =
In practice, we can let M = I and set the z term to zero later
default orthographic projection
Computer Graphics with WebGL © Ed Angel, 2014
5
Simple Perspective
• Center of projection at the origin • Projection plane z = d, d < 0
Computer Graphics with WebGL © Ed Angel, 2014
6
Perspective Equations
Consider top and side views
xp = yp = zp = d
Computer Graphics with WebGL © Ed Angel, 2014
3
7
Homogeneous Coordinate Form
M = consider q = Mp where
p = ⇒ q =
Computer Graphics with WebGL © Ed Angel, 2014
8
Perspective Division
• However w ≠ 1, so we must divide by w to return from homogeneous coordinates
• This perspective division yields
the desired perspective equations
• We specify the desired clipping volume with MV.js functions that are equivalent to deprecated OpenGL functions
xp = yp = zp = d
Computer Graphics with WebGL © Ed Angel, 2014
1
1
Introduction to Computer Graphics with WebGL
Ed Angel
WebGL Projection
Computer Graphics with WebGL © Ed Angel, 2014
2
WebGL Orthogonal Viewing
ortho(left,right,bottom,top,near,far)
near and far measured from camera
Computer Graphics with WebGL © Ed Angel, 2014
ortho1.html
3Computer Graphics with WebGL © Ed Angel, 2014
2
Viewing a Cube
4Computer Graphics with WebGL © Ed Angel, 2014
camera
Sphere Equations
5Computer Graphics with WebGL © Ed Angel, 2014
€
x = rsinθ cosφy = rsinθ sinφz = rcosθ
θ constant: circles of constant longitude φ constant: circles of constant latitude
Rotating Camera
6Computer Graphics with WebGL © Ed Angel, 2014
var render = function() { gl.clear( gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); eye = vec3(radius*Math.sin(theta)*Math.cos(phi), radius*Math.sin(theta)*Math.sin(phi), radius*Math.cos(theta)); modelViewMatrix = lookAt(eye, at , up); projectionMatrix = ortho(left, right, bottom, ytop, near, far); gl.uniformMatrix4fv( modelViewMatrixLoc, false, flatten(modelViewMatrix) ); gl.uniformMatrix4fv( projectionMatrixLoc, false, flatten(projectionMatrix) ); gl.drawArrays( gl.TRIANGLES, 0, numVertices ); requestAnimFrame(render);}
3
7
WebGL Perspective
frustum(left,right,bottom,top,near,far)
Computer Graphics with WebGL © Ed Angel, 2014
8
Using Field of View
With frustum it is often difficult to get the desired view perpective(fovy, aspect, near, far) often
provides a better interface
aspect = w/h
front plane
Computer Graphics with WebGL © Ed Angel, 2014
Computing Matrices
• Compute in JS file, send to vertex shader with gl.uniformMatrix4fv
• Dynamic: update in render() or shader
9Computer Graphics with WebGL © Ed Angel, 2014
4
Rotating Camera
10
var render = function(){ gl.clear( gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); eye = vec3(radius*Math.sin(theta)*Math.cos(phi), radius*Math.sin(theta)*Math.sin(phi), radius*Math.cos(theta)); modelViewMatrix = lookAt(eye, at , up); projectionMatrix = perspective(fovy, aspect, near, far); gl.uniformMatrix4fv( modelViewMatrixLoc, false, flatten(modelViewMatrix) ); gl.uniformMatrix4fv( projectionMatrixLoc, false, flatten(projectionMatrix) ); gl.drawArrays( gl.TRIANGLES, 0, NumVertices ); requestAnimFrame(render);}
Computer Graphics with WebGL © Ed Angel, 2014
1
1
Introduction to Computer Graphics with WebGL
Ed Angel
Orthogonal Projection Matrices
Computer Graphics with WebGL © Ed Angel, 2014
2
Normalization
• Rather than derive a different projection matrix for each type of projection, we can convert all projections to orthogonal projections with the default view volume
• This strategy allows us to use standard transformations in the pipeline and makes for efficient clipping
Computer Graphics with WebGL © Ed Angel, 2014
3
Pipeline View
model-view transformation
projection transformation
perspective division
clipping projection
nonsingular 4D → 3D
against default cube 3D → 2D
Computer Graphics with WebGL © Ed Angel, 2014
2
4
Notes • We stay in four-dimensional homogeneous coordinates
through both the modelview and projection transformations
- Both these transformations are nonsingular - Default to identity matrices (orthogonal view)
• Normalization lets us clip against simple cube regardless of type of projection
• Delay final projection until end - Important for hidden-surface removal to retain depth
information as long as possible
Computer Graphics with WebGL © Ed Angel, 2014
5
Orthogonal Normalization
ortho(left,right,bottom,top,near,far)
normalization ⇒ find transformation to convert specified clipping volume to default
Computer Graphics with WebGL © Ed Angel, 2014
6
Orthogonal Matrix
• Two steps - Move center to origin
T(-(left+right)/2, -(bottom+top)/2,(near+far)/2)) - Scale to have sides of length 2
S(2/(left-right),2/(top-bottom),2/(near-far))
€
2right − left
0 0 −right − leftright − left
0 2top − bottom
0 −top+ bottomtop − bottom
0 0 2near − far
far + nearfar − near
0 0 0 1
#
$
% % % % % % %
&
'
( ( ( ( ( ( (
P = ST =
Computer Graphics with WebGL © Ed Angel, 2014
3
7
Final Projection
• Set z =0 • Equivalent to the homogeneous coordinate transformation
• Hence, general orthogonal projection in 4D is
Morth =
P = MorthST
Computer Graphics with WebGL © Ed Angel, 2014
8
Oblique Projections
• The OpenGL projection functions cannot produce general parallel projections such as
• However if we look at the example of the cube it appears that the cube has been sheared
• Oblique Projection = Shear + Orthogonal Projection
Computer Graphics with WebGL © Ed Angel, 2014
9
General Shear
top view side view
Computer Graphics with WebGL © Ed Angel, 2014
4
10
Shear Matrix
xy shear (z values unchanged)
Projection matrix
General case:
H(θ,φ) =
P = Morth H(θ,φ)
P = Morth STH(θ,φ)
Computer Graphics with WebGL © Ed Angel, 2014
11
Equivalency
Computer Graphics with WebGL © Ed Angel, 2014
12
Effect on Clipping
• The projection matrix P = STH transforms the original clipping volume to the default clipping volume
top view
DOP DOP
near plane
far plane
object
clipping volume
z = -1
z = 1
x = -1 x = 1
distorted object (projects correctly)
Computer Graphics with WebGL © Ed Angel, 2014
1
1
Introduction to Computer Graphics with WebGL
Ed Angel
Perspective Projection Matrices
Computer Graphics with WebGL © Ed Angel, 2014
2
Simple Perspective
Consider a simple perspective with the COP at the origin, the near clipping plane at z = -1, and a 90 degree field of view determined by the planes
x = ±z, y = ±z
Computer Graphics with WebGL © Ed Angel, 2014
3
Perspective Matrices
Simple projection matrix in homogeneous coordinates
Note that this matrix is independent of the far clipping plane
M =
Computer Graphics with WebGL © Ed Angel, 2014
2
4
Generalization
N =
after perspective division, the point (x, y, z, 1) goes to
x’’ = x/z y’’ = y/z Z’’ = -(α+β/z)
which projects orthogonally to the desired point regardless of α and β
Computer Graphics with WebGL © Ed Angel, 2014
5
Picking α and β
If we pick
α =
β =
the near plane is mapped to z = -1 the far plane is mapped to z =1 and the sides are mapped to x = ± 1, y = ± 1
Hence the new clipping volume is the default clipping volume
Computer Graphics with WebGL © Ed Angel, 2014
6
Normalization Transformation
original clipping volume original object new clipping
volume
distorted object projects correctly
Computer Graphics with WebGL © Ed Angel, 2014
3
7
Normalization and Hidden-Surface Removal
• Although our selection of the form of the perspective matrices may appear somewhat arbitrary, it was chosen so that if z1 > z2 in the original clipping volume then the for the transformed points z1’ > z2’
• Thus hidden surface removal works if we first apply the normalization transformation
• However, the formula z’’ = -(α+β/z) implies that the distances are distorted by the normalization which can cause numerical problems especially if the near distance is small
Computer Graphics with WebGL © Ed Angel, 2014
8
WebGL Perspective
frustum allows for a nonsymmetric viewing frustum (although perspective does not)
Computer Graphics with WebGL © Ed Angel, 2014
9
OpenGL Perspective Matrix
• The normalization in frustum requires an initial shear to form a right viewing pyramid, followed by a scaling to get the normalized perspective volume.
• Finally, the perspective matrix results in needing only a final orthogonal transformation
P = NSH
our previously defined perspective matrix
shear and scale
Computer Graphics with WebGL © Ed Angel, 2014
4
10
Why do we do it this way?
• Normalization allows for a single pipeline for both perspective and orthogonal viewing
• We stay in four dimensional homogeneous coordinates as long as possible to retain three-dimensional information needed for hidden-surface removal and shading
• We simplify clipping
Computer Graphics with WebGL © Ed Angel, 2014
Perspective Matrices
11
€
P =
2* nearright − left
0 right − leftright − left
0
0 2* neartop − bottom
top+ bottomtop − bottom
0
0 0 −far + nearfar − near
−2* far * nearfar − near
0 0 −1 0
#
$
% % % % % % %
&
'
( ( ( ( ( ( (
€
P =
nearright
0 0 0
0 neartop
0 0
0 0 −far + nearfar − near
−2* far * nearfar − near
0 0 −1 0
#
$
% % % % % % %
&
'
( ( ( ( ( ( (
frustum
perspective
Computer Graphics with WebGL © Ed Angel, 2014
1
1
Introduction to Computer Graphics with WebGL
Ed Angel
Meshes
Computer Graphics with WebGL © Ed Angel, 2014
Meshes
• Polygonal meshes are the standard method for defining and displaying surfaces
- Approximations to curved surfaces - Directly from CAD packages - Subdivision
• Most common are quadrilateral and triangular meshes - Triangle strips and fans
2Computer Graphics with WebGL © Ed Angel, 2014
Height Fields • For each (x, z) there is a unique y • Sampling leads to an array of y values • If yij = f(xi, zj) then the four points (xi, yij, zj), (x(i+1), y(i+1)j,
zj), (xi, yi(j+1), zj+1), (x(i+1), y(i+1)(j+1), z(j+1) form a quadrilateral
• Display as quadrilateral or triangular mesh using strips
3Computer Graphics with WebGL © Ed Angel, 2014
2
Honolulu Plot Using Line Strips
4Computer Graphics with WebGL © Ed Angel, 2014
Lines on Back and Hidden Faces
5
sombrero or Mexican hat function (sin πr)/(πr)
Computer Graphics with WebGL © Ed Angel, 2014
Using Polygons • We can use four adjacent data points to form a
quadrilateral and thus two triangles which can be shaded
• Note using a single color for all polygons will not work well
- need lighting and shading to see the 3D nature of the data
• But what if we want to see the grid? - avoids the need for lighting calculations
• We can display each quadrilateral twice - First as two filled white triangles - Second as a black line loop
6Computer Graphics with WebGL © Ed Angel, 2014
3
Hat Using Triangles and Lines
7Computer Graphics with WebGL © Ed Angel, 2014
Polygon Offset
• Even though we draw the polygon first followed by the lines, small numerical errors cause some of fragments on the line to be display behind the corresponding fragment on the triangle
• Polygon offset (gl.polygonOffset) moves fragments slightly away from camera
• Apply to triangle rendering
8Computer Graphics with WebGL © Ed Angel, 2014
Hat with Polygon Offset
9Computer Graphics with WebGL © Ed Angel, 2014
4
Other Mesh Issues
• How do we construct a mesh from disparate data (unstructured points)
• Technologies such as laser scans can produced tens of millions of such points
• Delaunay triangulation • Can we use one triangle strip for an entire 2D mesh? • Mesh simplification
10Computer Graphics with WebGL © Ed Angel, 2014
1
1
Introduction to Computer Graphics with WebGL
Ed Angel
Lighting and Shading
Computer Graphics with WebGL © Ed Angel, 2014
2
Why we need shading
Suppose we build a model of a blue sphere using many polygons and color it using a single color. We get something like
But we want something that looks like
Computer Graphics with WebGL © Ed Angel, 2014
3
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
Computer Graphics with WebGL © Ed Angel, 2014
2
4
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
Computer Graphics with WebGL © Ed Angel, 2014
5
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 • Rendering equation is global and includes
- Shadows - Multiple scattering from object to object
Computer Graphics with WebGL © Ed Angel, 2014
6
Global Effects
translucent surface
shadow
multiple reflection
Computer Graphics with WebGL © Ed Angel, 2014
3
7
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”
- Exist many techniques for approximating global effects
Computer Graphics with WebGL © Ed Angel, 2014
8
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
Computer Graphics with WebGL © Ed Angel, 2014
9
Light Sources
General light sources are difficult to work with because we must integrate light coming from all points on the source
Computer Graphics with WebGL © Ed Angel, 2014
4
10
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
Computer Graphics with WebGL © Ed Angel, 2014
11
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
Computer Graphics with WebGL © Ed Angel, 2014
1
1
Introduction to Computer Graphics with WebGL
Ed Angel
The Phong Model
Computer Graphics with WebGL © Ed Angel, 2014
2
Phong Model
• A simple model that can be computed rapidly • Has three components
- Diffuse - Specular - Ambient
• Uses four vectors - To source - To viewer - Normal - Perfect reflector
Computer Graphics with WebGL © Ed Angel, 2014
3
Ideal Reflector
• Normal is determined by local orientation • Angle of incidence = angle of relection • The three vectors must be coplanar
r = 2 (l · n ) n - l
Computer Graphics with WebGL © Ed Angel, 2014
2
4
Lambertian Surface
• Perfectly diffuse reflector • Light scattered equally in all directions • Amount of light reflected is proportional to the vertical
component of incoming light - reflected light ~cos θi
- cos θi = l · n if vectors normalized - There are also three coefficients, kr, kb, kg that show
how much of each color component is reflected • We can also add a 1/d2 term to account for the
distance from the light source
Computer Graphics with WebGL © Ed Angel, 2014
5
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
Computer Graphics with WebGL © Ed Angel, 2014
6
Modeling Specular Relections
• Phong proposed using a term that dropped off as the angle between the viewer and the ideal reflection increased
φ
Ir ~ ks I cosαφ
shininess coef
absorption coef incoming intensity
reflected intensity
Computer Graphics with WebGL © Ed Angel, 2014
3
7
The Shininess Coefficient
• Values of α between 100 and 200 correspond to metals
• Values between 5 and 10 give surface that look like plastic
cosα φ
φ 90 -90 Computer Graphics with WebGL © Ed Angel, 2014
1
1
Introduction to Computer Graphics with WebGL
Ed Angel
Applying the Phong Model
Computer Graphics with WebGL © Ed Angel, 2014
2
Ambient Light
• Ambient light is the result of multiple interactions between (large) light sources and the objects in the environment
• Amount and color depend on both the color of the light(s) and the material properties of the object
• Add ka Ia to diffuse and specular terms
reflection coef intensity of ambient light
Computer Graphics with WebGL © Ed Angel, 2014
3
Distance Terms
• The light from a point source that reaches a surface is inversely proportional to the square of the distance between them
• We can add a factor of the form 1/(a + bd +cd2) to the diffuse and specular terms • The constant and linear terms soften the effect of the
point source
Computer Graphics with WebGL © Ed Angel, 2014
2
4
Light Sources
• In the Phong Model, we add the results from each light source
• Each light source has separate diffuse, specular, and ambient terms to allow for maximum flexibility even though this form does not have a physical justification
• Separate red, green and blue components • Hence, 9 coefficients for each point source
- Idr, Idg, Idb, Isr, Isg, Isb, Iar, Iag, Iab
Computer Graphics with WebGL © Ed Angel, 2014
5
Material Properties
• Material properties match light source properties - Nine absorbtion coefficients
• kdr, kdg, kdb, ksr, ksg, ksb, kar, kag, kab - Shininess coefficient α
Computer Graphics with WebGL © Ed Angel, 2014
6
Adding Up the Components
For each light source and each color component, the Phong model can be written (without the distance terms) as
I =kd Id l · n + ks Is (v · r )α + ka Ia
For each color component we add contributions from all sources
Computer Graphics with WebGL © Ed Angel, 2014
3
7
Modified Phong Model
• The specular term in the Phong model is problematic because it requires the calculation of a new reflection vector and view vector for each vertex
• Blinn suggested an approximation using the halfway vector that is more efficient
Computer Graphics with WebGL © Ed Angel, 2014
8
The Halfway Vector
• h is normalized vector halfway between l and v
h = ( l + v )/ | l + v |
Computer Graphics with WebGL © Ed Angel, 2014
9
Using the halfway vector
• Replace (v · r )α by (n · h )β
• β is chosen to match shininess • Note that halfway angle is half of angle between r and
v if vectors are coplanar • Resulting model is known as the modified Phong or
Phong-Blinn lighting model - Specified in OpenGL standard
Computer Graphics with WebGL © Ed Angel, 2014
4
10
Example
Only differences in these teapots are the parameters in the modified Phong model
Computer Graphics with WebGL © Ed Angel, 2014
11
Computation of Vectors
• l and v are specified by the application • Can computer r from l and n • Problem is determining n • For simple surfaces it can be determined but how we determine n differs depending on underlying representation of surface
• WebGL leaves determination of normals to application
Computer Graphics with WebGL © Ed Angel, 2014
12
Plane Normals
• Equation of plane: ax+by+cz+d = 0 • We know that plane is determined by three points p0,
p2, p3 or normal n and p0
• Normal can be obtained by
n = (p2-p0) × (p1-p0)
Computer Graphics with WebGL © Ed Angel, 2014
5
13
Normal to Sphere
• Implicit function f(x,y.z)=0 • Normal given by gradient • Sphere f(p)=p·p-1 n = [∂f/∂x, ∂f/∂y, ∂f/∂z]T=p
Computer Graphics with WebGL © Ed Angel, 2014
Computing Reflection Direction
• Angle of incidence = angle of reflection • Normal, light direction and reflection direction are
coplaner • Want all three to be unit length
14
€
r = 2(l • n)n − l
Computer Graphics with WebGL © Ed Angel, 2014