![Page 1: Shading (introduction to rendering) - Algorithmic Botany](https://reader036.vdocuments.us/reader036/viewer/2022062417/62ae24e55cb5403497043e27/html5/thumbnails/1.jpg)
Shading(introduction to rendering)
![Page 2: Shading (introduction to rendering) - Algorithmic Botany](https://reader036.vdocuments.us/reader036/viewer/2022062417/62ae24e55cb5403497043e27/html5/thumbnails/2.jpg)
Renderingv We know how to specify the geometry but how is the
color calculated
![Page 3: Shading (introduction to rendering) - Algorithmic Botany](https://reader036.vdocuments.us/reader036/viewer/2022062417/62ae24e55cb5403497043e27/html5/thumbnails/3.jpg)
Renderingv We know how to specify the geometry but how is the
color calculated
![Page 4: Shading (introduction to rendering) - Algorithmic Botany](https://reader036.vdocuments.us/reader036/viewer/2022062417/62ae24e55cb5403497043e27/html5/thumbnails/4.jpg)
Rendering: simulation of light transport
v Diffuse scattering o matt surfaces
v Specular reflectiono shiny surfaceso highlight
v Transparencyo glass, watero penetrate the surface
v Global light transporto realism
![Page 5: Shading (introduction to rendering) - Algorithmic Botany](https://reader036.vdocuments.us/reader036/viewer/2022062417/62ae24e55cb5403497043e27/html5/thumbnails/5.jpg)
Global illumination
No multiple diffuse reflections Multiple diffuse reflections
![Page 6: Shading (introduction to rendering) - Algorithmic Botany](https://reader036.vdocuments.us/reader036/viewer/2022062417/62ae24e55cb5403497043e27/html5/thumbnails/6.jpg)
Local illumination
v Input:o a 3D objecto Material and color of the objecto Position and structure of the light sourceo “Intensity” of the light source
v Output:o Color and intensity of points of the given object
A (modest) example of shading
![Page 7: Shading (introduction to rendering) - Algorithmic Botany](https://reader036.vdocuments.us/reader036/viewer/2022062417/62ae24e55cb5403497043e27/html5/thumbnails/7.jpg)
Dealing with color
v Three component intensity (red, green, blue)
v Luminance (intensity) of the source
o Red component of source red component of image
o Green component of source green component of image
o Blue component of source blue component of image
v Three similar but independent calculations
v We focus on one scalar value only
![Page 8: Shading (introduction to rendering) - Algorithmic Botany](https://reader036.vdocuments.us/reader036/viewer/2022062417/62ae24e55cb5403497043e27/html5/thumbnails/8.jpg)
Diffuse reflection
v A perfect diffuse reflector (Lambertian surfacee) scatters the light equally in all directions
v Same appearance to all viewerso Material of the surfaceo The position of the light
v Same appearance to all viewers
![Page 9: Shading (introduction to rendering) - Algorithmic Botany](https://reader036.vdocuments.us/reader036/viewer/2022062417/62ae24e55cb5403497043e27/html5/thumbnails/9.jpg)
Diffuse: Two important vectors
v To compute the intensity at P, we needo The unit normal vector N,o The unit vector L, from P to the light
L
N
P
θ
![Page 10: Shading (introduction to rendering) - Algorithmic Botany](https://reader036.vdocuments.us/reader036/viewer/2022062417/62ae24e55cb5403497043e27/html5/thumbnails/10.jpg)
Normals
o What direction is the surface facing?
![Page 11: Shading (introduction to rendering) - Algorithmic Botany](https://reader036.vdocuments.us/reader036/viewer/2022062417/62ae24e55cb5403497043e27/html5/thumbnails/11.jpg)
CrossProduct
o n.x = a.y * b.z - a.z * b.yo n.y = a.z * b.x - a.x * b.zo n.z = a.x * b.y - a.y * b.x
![Page 12: Shading (introduction to rendering) - Algorithmic Botany](https://reader036.vdocuments.us/reader036/viewer/2022062417/62ae24e55cb5403497043e27/html5/thumbnails/12.jpg)
Normals
o A = V2 – V1o B = V0 – V1o N = A x B
![Page 13: Shading (introduction to rendering) - Algorithmic Botany](https://reader036.vdocuments.us/reader036/viewer/2022062417/62ae24e55cb5403497043e27/html5/thumbnails/13.jpg)
Lambert’s cosine law
v I : diffuse reflection at Pv
v Ip: intensity of the light from source
v 0 ≤ 𝑘% ≤ 1 ∶coefficient of diffuse reflection
NLkINLkII dpdp
!!!!== ),cos( ●
![Page 14: Shading (introduction to rendering) - Algorithmic Botany](https://reader036.vdocuments.us/reader036/viewer/2022062417/62ae24e55cb5403497043e27/html5/thumbnails/14.jpg)
Coefficient of diffuse reflectionv kd is usually determined by a trial and errorv Examples:
Component Gold Black plastic SilverRed 0.75 0.01 0.5Green 0.6 0.01 0.5
Blue 0.22 0.01 0.5
kd=0.05 kd=0.25 kd=0.5 kd=0.75 kd=1
![Page 15: Shading (introduction to rendering) - Algorithmic Botany](https://reader036.vdocuments.us/reader036/viewer/2022062417/62ae24e55cb5403497043e27/html5/thumbnails/15.jpg)
Specular reflection
v Diffusive reflection: no highlights, rough surfacev Specular reflection: highlights, shiny and smooth surfacesv View dependent reflection
![Page 16: Shading (introduction to rendering) - Algorithmic Botany](https://reader036.vdocuments.us/reader036/viewer/2022062417/62ae24e55cb5403497043e27/html5/thumbnails/16.jpg)
Specular: Three important vectors
v To compute the intensity at P, we needo The unit normal vector N,o The unit vector L, from P to the lighto The unit vector V, from P to the viewer
L
N
V
P
![Page 17: Shading (introduction to rendering) - Algorithmic Botany](https://reader036.vdocuments.us/reader036/viewer/2022062417/62ae24e55cb5403497043e27/html5/thumbnails/17.jpg)
v I : specular reflection at Pv
v Ip: intensity of the light from source
v 0 ≤ 𝑘( ≤ 1: coefficient of specular reflection
v n: controls “shininess”
The Phong model for specular reflection
P
NL R
P
NL R
V
nsp
nsp VRkIkII )(cos
!!== ●
𝑅 = 2 𝐿 - 𝑁 𝑁 − 𝐿 (why?)
![Page 18: Shading (introduction to rendering) - Algorithmic Botany](https://reader036.vdocuments.us/reader036/viewer/2022062417/62ae24e55cb5403497043e27/html5/thumbnails/18.jpg)
The shininess coefficient
1=n 2=n 4=n 6=n
cos
0 90o-90o
increasing n
![Page 19: Shading (introduction to rendering) - Algorithmic Botany](https://reader036.vdocuments.us/reader036/viewer/2022062417/62ae24e55cb5403497043e27/html5/thumbnails/19.jpg)
Ambient light
v “Physical rules” are too simplified v No indirect or global interaction of light
v A hack to overcome the problem: use “ambient light”
![Page 20: Shading (introduction to rendering) - Algorithmic Botany](https://reader036.vdocuments.us/reader036/viewer/2022062417/62ae24e55cb5403497043e27/html5/thumbnails/20.jpg)
Ambient light specification
v Not situated at any particular pointv Spreads uniformly in all directionsv
v Ia : intensity of ambient light in the environment v I : ambient light at a given pointv 0 ≤ 𝑘0 ≤ 1 : coefficient of ambient light reflection
ka=0 ka=0.5 ka=1
aaIkI =
![Page 21: Shading (introduction to rendering) - Algorithmic Botany](https://reader036.vdocuments.us/reader036/viewer/2022062417/62ae24e55cb5403497043e27/html5/thumbnails/21.jpg)
A combined model(The Phong local illumination model)
v The final model = diffuse + specular + ambient
v aan
spdp kIVRkINLkII ++= )()(!!!!
●●
![Page 22: Shading (introduction to rendering) - Algorithmic Botany](https://reader036.vdocuments.us/reader036/viewer/2022062417/62ae24e55cb5403497043e27/html5/thumbnails/22.jpg)
Example: two light sources
v Right Light=(1.0,0.0,0.0)v Left Light=(1.0,1.0,1.0)
![Page 23: Shading (introduction to rendering) - Algorithmic Botany](https://reader036.vdocuments.us/reader036/viewer/2022062417/62ae24e55cb5403497043e27/html5/thumbnails/23.jpg)
Multiple light sources
v The total reflection at p is thesum of all contributed intensities from all sources
v “Standard” OpenGL supports up to 8 light sources
![Page 24: Shading (introduction to rendering) - Algorithmic Botany](https://reader036.vdocuments.us/reader036/viewer/2022062417/62ae24e55cb5403497043e27/html5/thumbnails/24.jpg)
Shading polygon meshesBrute-force idea:
for each face in the meshfor each point on the face
find normal at this pointuse Phong model to find the color
v These two steps require large a (relatively) amount of computations
v Interpolated polygon shading is acomputationally efficient alternative
![Page 25: Shading (introduction to rendering) - Algorithmic Botany](https://reader036.vdocuments.us/reader036/viewer/2022062417/62ae24e55cb5403497043e27/html5/thumbnails/25.jpg)
Scan-converting polygons
v Polygon- fill routine v Convex polygons can be filled particularly efficientlyv Convex object definition
Scan line
Single run Multiple run
convex non-convex
![Page 26: Shading (introduction to rendering) - Algorithmic Botany](https://reader036.vdocuments.us/reader036/viewer/2022062417/62ae24e55cb5403497043e27/html5/thumbnails/26.jpg)
In which space should polygons be filled?
![Page 27: Shading (introduction to rendering) - Algorithmic Botany](https://reader036.vdocuments.us/reader036/viewer/2022062417/62ae24e55cb5403497043e27/html5/thumbnails/27.jpg)
Scan-converting convex polygons:Flat shading
for each face in the mesh {find color c for the pixel at (x,y)for (y=ybottom; y<=ytop; y++) {
find xleft and xright
for (x=xleft; x<= xright; x++) set the color of fragment at (x,y) to c
}}
![Page 28: Shading (introduction to rendering) - Algorithmic Botany](https://reader036.vdocuments.us/reader036/viewer/2022062417/62ae24e55cb5403497043e27/html5/thumbnails/28.jpg)
Flat shading
o Individual facets are visualized
o Same color for any point of the face
o OpenGL: glShadeModel(GL_FLAT)
![Page 29: Shading (introduction to rendering) - Algorithmic Botany](https://reader036.vdocuments.us/reader036/viewer/2022062417/62ae24e55cb5403497043e27/html5/thumbnails/29.jpg)
Flat versus smooth shading
v Flat shading is particularly efficient v Not suitable for smooth objects
(Mach band effect)
![Page 30: Shading (introduction to rendering) - Algorithmic Botany](https://reader036.vdocuments.us/reader036/viewer/2022062417/62ae24e55cb5403497043e27/html5/thumbnails/30.jpg)
Face vs. “vertex” normals
o For each triangle we can define a normal for the face
o For each vertex we an define a normal by interpolating normals of attached faces
![Page 31: Shading (introduction to rendering) - Algorithmic Botany](https://reader036.vdocuments.us/reader036/viewer/2022062417/62ae24e55cb5403497043e27/html5/thumbnails/31.jpg)
v Gouraud shading: interpolates values of c
v Bilinear interpolation
v
v More expensive than flat shading
Smooth shading (Gouraud)
𝑐1
𝑐2
𝑐3
𝑐4 𝑐5𝑐 𝛼1− 𝛼
1 − 𝛽
𝛽
1 − 𝛾
𝛾
![Page 32: Shading (introduction to rendering) - Algorithmic Botany](https://reader036.vdocuments.us/reader036/viewer/2022062417/62ae24e55cb5403497043e27/html5/thumbnails/32.jpg)
Gouraud shading
![Page 33: Shading (introduction to rendering) - Algorithmic Botany](https://reader036.vdocuments.us/reader036/viewer/2022062417/62ae24e55cb5403497043e27/html5/thumbnails/33.jpg)
Toward the Phong interpolation:interpolating vertex normals
v Polygonal meshes don’t have normal at the vertices
v But they (often) approximate a smooth underlying surface
v A simple estimate for vertex normal:the nomalized average of the normals of the faces
![Page 34: Shading (introduction to rendering) - Algorithmic Botany](https://reader036.vdocuments.us/reader036/viewer/2022062417/62ae24e55cb5403497043e27/html5/thumbnails/34.jpg)
Phong shading (interpolation)
v Better realism for highlightsv Use normal of vertices to interpolate normal of
interior pointsv Linear interpolation of n1 and n3 nl
v Linear interpolation of n1 and n2 nr
v Linear interpolation of nl and nr nv Normalize nv Drawback: relatively slow
n1
n2
n3 nlnrn
![Page 35: Shading (introduction to rendering) - Algorithmic Botany](https://reader036.vdocuments.us/reader036/viewer/2022062417/62ae24e55cb5403497043e27/html5/thumbnails/35.jpg)
A comparison
![Page 36: Shading (introduction to rendering) - Algorithmic Botany](https://reader036.vdocuments.us/reader036/viewer/2022062417/62ae24e55cb5403497043e27/html5/thumbnails/36.jpg)
Shading: local illumination mode vs. interpolation
![Page 37: Shading (introduction to rendering) - Algorithmic Botany](https://reader036.vdocuments.us/reader036/viewer/2022062417/62ae24e55cb5403497043e27/html5/thumbnails/37.jpg)
![Page 38: Shading (introduction to rendering) - Algorithmic Botany](https://reader036.vdocuments.us/reader036/viewer/2022062417/62ae24e55cb5403497043e27/html5/thumbnails/38.jpg)
![Page 39: Shading (introduction to rendering) - Algorithmic Botany](https://reader036.vdocuments.us/reader036/viewer/2022062417/62ae24e55cb5403497043e27/html5/thumbnails/39.jpg)
Hidden surface/line removal
v Visible surfaceo Parts of scene that are
visible from a chosen viewpoint
v Hidden surfaceo Parts of scene that are not
visible from a chosen viewpoint
![Page 40: Shading (introduction to rendering) - Algorithmic Botany](https://reader036.vdocuments.us/reader036/viewer/2022062417/62ae24e55cb5403497043e27/html5/thumbnails/40.jpg)
Back-face removal
v Also called back-face cullingv We see a polygon if its normal is
pointed toward the viewerv Condition:
![Page 41: Shading (introduction to rendering) - Algorithmic Botany](https://reader036.vdocuments.us/reader036/viewer/2022062417/62ae24e55cb5403497043e27/html5/thumbnails/41.jpg)
Digression: Silhouette (contour) extraction
v Silhouette lines are very important for visualizing objects( very useful in the traditional art)
v Any edge shared by a front-facing polygon and a back-facing polygon is a silhouette edge (but may be hidden)
v Sample application: NPR
![Page 42: Shading (introduction to rendering) - Algorithmic Botany](https://reader036.vdocuments.us/reader036/viewer/2022062417/62ae24e55cb5403497043e27/html5/thumbnails/42.jpg)
Is back-face removal enough?v It fails for a non-convex surfacev It can’t recognize partly obscured faces
![Page 43: Shading (introduction to rendering) - Algorithmic Botany](https://reader036.vdocuments.us/reader036/viewer/2022062417/62ae24e55cb5403497043e27/html5/thumbnails/43.jpg)
Hidden-surface algorithms
v Object-space
o Comparison within real 3D sceneo Works best for scenes that contain few polygons
v Image-spaceo Decide on visibility at each pixel’s position
![Page 44: Shading (introduction to rendering) - Algorithmic Botany](https://reader036.vdocuments.us/reader036/viewer/2022062417/62ae24e55cb5403497043e27/html5/thumbnails/44.jpg)
Z-buffer (depth-buffer)
v A commonly used image-space approach to hidden-surface removal
v Each location in the z-buffer contains the distance of the closest 3D point.
v Use the intensity (color) of the nearest 3D point for each pixel
![Page 45: Shading (introduction to rendering) - Algorithmic Botany](https://reader036.vdocuments.us/reader036/viewer/2022062417/62ae24e55cb5403497043e27/html5/thumbnails/45.jpg)
Recall polygon fill algorithm
Screen space
for each face in the meshfor (y=ybottom; y<=ytop; y++) {
find xleft and xright
for (x=xleft; x<= xright; x++) find color c for the pixel at (x,y)
}
![Page 46: Shading (introduction to rendering) - Algorithmic Botany](https://reader036.vdocuments.us/reader036/viewer/2022062417/62ae24e55cb5403497043e27/html5/thumbnails/46.jpg)
The Z-buffer algorithm
for all positions (x,y) on the screenframe(x,y) = backgrounddepth(x,y) = max_distance
endfor each polygon in the mesh
for each point(x,y) in the polygon-fill algorithmcompute z, the distance of the corresponding 3D-point from COPif depth(x,y) > z // current point is closer
depth(x,y) = zframe(x,y) = I(p) //shading
endifendfor
endfor
![Page 47: Shading (introduction to rendering) - Algorithmic Botany](https://reader036.vdocuments.us/reader036/viewer/2022062417/62ae24e55cb5403497043e27/html5/thumbnails/47.jpg)
Some facts about the z-buffer algorithm
v After the algorithmo Frame buffer contains intensity values of the visible surfaceo z-buffer contains depth values for all visible points
v For the step in algorithm o We know d1, d2, d3 and d4 from vertices of the mesho Use linear interpolation for other points
d1
d2
d3
d4
![Page 48: Shading (introduction to rendering) - Algorithmic Botany](https://reader036.vdocuments.us/reader036/viewer/2022062417/62ae24e55cb5403497043e27/html5/thumbnails/48.jpg)
Beyond what we just learned...
![Page 49: Shading (introduction to rendering) - Algorithmic Botany](https://reader036.vdocuments.us/reader036/viewer/2022062417/62ae24e55cb5403497043e27/html5/thumbnails/49.jpg)
Transparency + refraction
![Page 50: Shading (introduction to rendering) - Algorithmic Botany](https://reader036.vdocuments.us/reader036/viewer/2022062417/62ae24e55cb5403497043e27/html5/thumbnails/50.jpg)
Caustics
![Page 51: Shading (introduction to rendering) - Algorithmic Botany](https://reader036.vdocuments.us/reader036/viewer/2022062417/62ae24e55cb5403497043e27/html5/thumbnails/51.jpg)
Traslucency
![Page 52: Shading (introduction to rendering) - Algorithmic Botany](https://reader036.vdocuments.us/reader036/viewer/2022062417/62ae24e55cb5403497043e27/html5/thumbnails/52.jpg)
Subsurface scattering
![Page 53: Shading (introduction to rendering) - Algorithmic Botany](https://reader036.vdocuments.us/reader036/viewer/2022062417/62ae24e55cb5403497043e27/html5/thumbnails/53.jpg)
Subsurface scattering
![Page 54: Shading (introduction to rendering) - Algorithmic Botany](https://reader036.vdocuments.us/reader036/viewer/2022062417/62ae24e55cb5403497043e27/html5/thumbnails/54.jpg)
More advanced renderingGlobal illumination
![Page 55: Shading (introduction to rendering) - Algorithmic Botany](https://reader036.vdocuments.us/reader036/viewer/2022062417/62ae24e55cb5403497043e27/html5/thumbnails/55.jpg)
Participating media