Upload
others
View
10
Download
0
Embed Size (px)
Citation preview
Shading and GLSLEDA 221
Jacob Munkberg
EDA 221 - Computer graphics: Introduction to 3D
Today• Wrap up animation
• Lighting and Shading
• Chapter 5 (some material about GLSL from Chapter 2)
• Phong, texture mapping, cube mapping & bump mapping
• Light sources, GLSL
2
EDA 221 - Computer graphics: Introduction to 3D
Cubic Hermite Interpolation
3
p(t) = [1 t t2 t3]
2
664
1 0 0 00 0 1 0�3 3 �2 �12 �2 1 1
3
775
2
664
p0
p1
p00
p01
3
775
z
y
xp0
p’0
p1p’1
p(t) = c0 + c1t+ c2t2 + c3t
3
p(t) = [1 t t2 t3]
2
664
c0c1c2c3
3
775
p(t) = tTM�1q
EDA 221 - Computer graphics: Introduction to 3D
Smoothstep• Useful special (1D) case of cubic
interpolation- performs smooth Hermite interpolation between
0 and 1 when a < x < b.
- Useful in cases where a threshold function with a smooth transition is desired.
- Tangents : 0 at x=a and 0 at x=b
4a b
x
EDA 221 - Computer graphics: Introduction to 3D
Smoothstep
5
float smoothstep(float x, float a, float b){ float t = clamp((x-a)/(b-a),0,1); return t*t*(3-2*t);}
Derive formula!
a bx
EDA 221 - Computer graphics: Introduction to 3D
Demo Smoothstep
6
EDA 221 - Computer graphics: Introduction to 3D
How to specify tangents?• One simple solution:
7
p0i ⇡
pi+1 � pi�1
2
p0i
pi-2
pi-1 pi
pi+1
pi+2
EDA 221 - Computer graphics: Introduction to 3D
Catmull-Rom Splines• Given a set of points, define tangents
as: - Curve segment between pi and pi+1 completely
defined by pi-1, pi, pi+1 and pi+2
8
p0i ⇡
pi+1 � pi�1
2
p0i
pi-2
pi-1 pi
pi+1
pi+2
EDA 221 - Computer graphics: Introduction to 3D
Catmull-Rom Splines
9
p0 p1
p2
p3
p01 =
p2 � p0
2
p02 =
p3 � p1
2
2
664
p(0)p(1)p0(0)p0(1)
3
775 =
2
664
0 1 0 00 0 1 0
�1/2 0 1/2 00 �1/2 0 1/2
3
775
2
664
p0
p1
p2
p3
3
775
p(t)
Four conditions:
EDA 221 - Computer graphics: Introduction to 3D
Catmull-Rom Splines• Tangent def. gives four conditions
- Insert in Hermite formula:
10
2
664
p(0)p(1)p0(0)p0(1)
3
775 =
2
664
0 1 0 00 0 1 0
�1/2 0 1/2 00 �1/2 0 1/2
3
775
2
664
p0
p1
p2
p3
3
775
q = Np
p(t) = tTM�1q = tTM�1Np
M�1N =1
2
2
664
0 2 0 0�1 0 1 02 �5 4 �1�1 3 �3 1
3
775 FEL I BOKEN!!!
EDA 221 - Computer graphics: Introduction to 3D
Catmull-Rom Splines
• If we add a tension parameter 𝜏:
the Catmull-Rom spline can be generalized to:
11
p(u) = [1 t t2 t3]
2
664
0 1 0 0�⌧ 0 ⌧ 02⌧ ⌧ � 3 3� 2⌧ �⌧�⌧ 2� ⌧ ⌧ � 2 ⌧
3
775
2
664
pi�1
pi
pi+1
pi+2
3
775
( (=(tension,(how(sharply(the(curve(bends(at(control(points((Keep(within([0,1]((Good(ini-al(value:(0.5%
Tension(
low(high(
p0i = ⌧(pi+1 � pi�1), ⌧ 2 [0, 1]
EDA 221 - Computer graphics: Introduction to 3D
Animate Colors• Other attributes than position can be
animated- Example: animate green color channel, G = 255*t
12t=0
R=255G=0B=0
R=255G=255B=0
t=1
EDA 221 - Computer graphics: Introduction to 3D
Light Sources• Ambient light- Equal intensity at all points in scene💡
• Point light- Intensity falloff with distance: 1/r2
• Spotlights- Limit point light to a cone
• Directional lights (sun)- All light rays parallel
13
r☼
🎥
EDA 221 - Computer graphics: Introduction to 3D
Shading Theory• Describe how surfaces interact
(reflect/refract/absorb) light
• Light-material interactions:- Specular surfaces (mirrors, shiny metals)
reflect light in narrow cone
- Diffuse surfaces (rough metal, paper)reflect incoming light in wide cone
- Translucent surfaces (glass, water, marble, skin)Some light penetrates the surface
14
EDA 221 - Computer graphics: Introduction to 3D
Phong Reflection Model• Efficient approximation of materials- Very popular in real-time graphics
• Describe materials as a sum of three types of reflection terms:
15
Ambient Diffuse Specular
=++
EDA 221 - Computer graphics: Introduction to 3D
Phong Reflection Model• Ambient: constant
• Diffuse:
• Specular
16
/ n · l/ (r · v)↵
☼
! " ☀
p
nl rv
EDA 221 - Computer graphics: Introduction to 3D
Diffuse (Lambertian) Term• Rough surfaces scatter
light in all directions
• Model with Lambert’s law
17
☼
p
nl θ
Rd / cos ✓ = l · n
|l| = |n| = 1
EDA 221 - Computer graphics: Introduction to 3D
Diffuse (Lambertian) Term• Let kd represent the fraction of incoming
diffuse light Ld that is reflected. The diffuse reflection term is:
18
Id = kd(l · n)Ld ☼
p
nl θ☼
EDA 221 - Computer graphics: Introduction to 3D
Specular Reflection• Smooth surface reflects
light in one direction
• Phong specular term
- where ks represent the fraction of incoming specular light Ls that is reflected. α represent shininess
19
☼
p
nl
! " ☀
v
r�
Is = ks(cos�)↵Ls = ks(r · v)↵Ls
EDA 221 - Computer graphics: Introduction to 3D
Reflection operator
20
n̂r
i
i
r = i� 2(n̂ · i)n̂
(n̂ · i)n̂
�2(n̂ · i)n̂
EDA 221 - Computer graphics: Introduction to 3D
Specular Reflection• Alternative specular term: - Use half vector:
• Alternative Phong specular term
- No reflection operation needed
- Commonly used, called“Blinn-Phong” specular
21
☼
p
n
l
! " ☀
v
h�
h =l+ v
|l+ v|
Is = ks(cos�)↵Ls = ks(n · h)↵Ls
EDA 221 - Computer graphics: Introduction to 3D
Shininess
22
-1.5 -1 -0.5 0 0.5 1 1.5
0.25
0.5
0.75
1
cos�
cos
2 �
(cos�)10
(cos�)100
(cos�)↵Vary exponent in
↵ ! 1Mirror if
EDA 221 - Computer graphics: Introduction to 3D
Shininess
23
α=1 α=10 α=100 α=1000
-1.5 -1 -0.5 0 0.5 1 1.5
0.25
0.5
0.75
1
EDA 221 - Computer graphics: Introduction to 3D
In practice
24
Diffuse Diffuse + Specular
EDA 221 - Computer graphics: Introduction to 3D
Phong Model• Combine the three terms
• More than one light? Accumulate!
25
I = kaLa + kdLd max(l · n, 0) + ksLs max((r · v)↵, 0)
Ambient Diffuse Specular
Ambient Diffuse Specular
= ++
C =X
i
(Iambient + Idiffuse + Ispecular)
EDA 221 - Computer graphics: Introduction to 3D
Phong Materials• In the Phong model, a material is
defined by the coefficients: ka, kd, ks and shininess
• Examples:- Red diffuse material:
- “Gold”:
26
ka = (0, 0, 0)
kd = (1, 0, 0)
ks = (0, 0, 0)
ka = (0, 0, 0)
kd = (0.8, 0.6, 0.2)
ks = (0.3, 0.3, 0.3)shininess=100
shininess=0
EDA 221 - Computer graphics: Introduction to 3D
Graphics Hardware• Pipeline that accelerates the costly
tasks of rendering
27
Vertex Shader
Rasterizer
Pixel Shader
Transform geometry(Lecture 2 & 3)
Compute visibilityper pixel
Compute color per pixel
EDA 221 - Computer graphics: Introduction to 3D
Graphics Hardware
28
Vertex Shader
Rasterizer
Pixel Shader
GLSL vertex shader
program
GLSL pixel shader
program
EDA 221 - Computer graphics: Introduction to 3D
Passing Geometry Info• We need position and a set of vectors
• All vectors need to be defined in the same coordinate space- One of the most common bugs in shaders
- Angle between vectors requires a common space
• The vertex shader transforms position and vectors
• Pixel shader evaluates Phong model
29
EDA 221 - Computer graphics: Introduction to 3D
Geometry setup for shading• Place object
• Place light source (defines l-vector)
• Place camera (defines v-vectors)
• Pick shading coordinate system
• Transform vectors into common system
30
EDA 221 - Computer graphics: Introduction to 3D
Geometry setup for shading• Place object
• Place light source (defines l-vector)
• Place camera (defines v-vectors)
• Pick shading coordinate system
• Transform vectors into common system
31
Vertexshader
Applicationcode
EDA 221 - Computer graphics: Introduction to 3D
GLSL• OpenGL Shading Language
• Domain-specific C-like language- Scalar types: float, int, bool
- Vectors: vec2, vec3, vec4
- Matrices: mat2, mat3, mat4
- Texture samplers
32
EDA 221 - Computer graphics: Introduction to 3D
Working with vectors
33
vec4 v(1.0, 2.0, 3.0, 4.0);
v[1] = v.y = 2.0;
v.xyz = v.rgb = vec3(1.0, 2.0, 3.0);
//Swizzle
v.wwxy = vec4(4.0, 4.0, 1.0, 2.0);
EDA 221 - Computer graphics: Introduction to 3D
GLSL Matrix & Vector ops
34
mat4 M = ...vec4 v = ...vec4 u = M*v; // Matrix mul
float f = dot(u.xyz, v.xyz);vec3 w = cross(u.xyz, v.xyz);
vec3 n = ...vec3 l = ...vec3 r = reflect(-l,n);float lambert = dot(n,l);
EDA 221 - Computer graphics: Introduction to 3D
Qualifiers• in, out- Pass vertex attributes to and from shaders
in vec2 tex_coord, out vec4 color;
- Older versions of GLSL use varying keyword and pre-defined variables such as gl_Vertex.
• uniform - variables from application- uniform float time
- Same value for all vertices / pixels
35
EDA 221 - Computer graphics: Introduction to 3D
Built-in functions• Use these!- Arithmetic: sqrt, pow, abs, clamp
- Trigonometric: sin, cos, ...
- Geometry: length, reflect, dot, cross, smoothstep, ...
36
EDA 221 - Computer graphics: Introduction to 3D
Output from shaders• Vertex shader output- gl_Position Mandatory output (position) from
vertex shader
- Add additional per-vertex outputs with out keyword. Ex: out vec4 color
• Pixel shader output- Pixel shader must output a vec4 color
- Example: out vec4 fColor
- Older versions of OpenGL use gl_FragColor
37
EDA 221 - Computer graphics: Introduction to 3D
Simple Vertex Shader• Transform a point- A vertex shader must output a position in clip
coordinates to the rasterizer
38
in vec4 vPos;uniform mat4 MVP; // ModelViewProjection mtx
void main(){ gl_Position = MVP*vPos;}
Matrix [4x4] * Vector [4x1] = Vector[4x1]
EDA 221 - Computer graphics: Introduction to 3D
Simple Pixel Shader• Set pixel color to red
39
out vec4 fColor;
void main(){ fColor = vec4(1,0,0,1);}
EDA 221 - Computer graphics: Introduction to 3D
Simple Pixel Shader• Interpolate vertex colors
40
in vec3 vertexColor;out vec4 fColor;
void main(){ fColor = vec4(vertexColor,1.0);}
EDA 221 - Computer graphics: Introduction to 3D
Coordinate Frames in GLSL• Object (Model) Coordinates
• World Coordinates
• Eye (camera) coordinates
• Clip coordinates
• Normalized Device Coordinates
• Window (screen) coordinates
41
EDA 221 - Computer graphics: Introduction to 3D
Phong Shading in GLSL
42
uniform vec3 ka; // Material ambientuniform vec3 kd; // Material diffuseuniform vec3 ks; // Material specularuniform float shininess;in vec3 fN; // From vertex shaderin vec3 fL; in vec3 fV;out vec4 fColor;
void main(){! vec3 N = normalize(fN);! vec3 L = normalize(fL);! vec3 V = normalize(fV);! vec3 R = normalize(reflect(-L,N));! vec3 diffuse = kd*max(dot(L,N),0.0);! vec3 specular = ks*pow(max(dot(V,R),0.0), shininess);! fColor.xyz = ka + diffuse + specular;! fColor.w = 1.0;}
Pixel Shader
FEL I BOKEN!!!
EDA 221 - Computer graphics: Introduction to 3D
Phong Shading in GLSL
43
World space version
Vertex Shaderuniform mat4 ModelViewProj;uniform mat4 World; // Model -> Worlduniform mat4 WorldIT; // Inverse transposeuniform vec3 LightPos; // Defined in world spaceuniform vec3 CamPos; // Defined in world spacein vec3 vPos;in vec3 vNormal;out vec3 fN;out vec3 fV;out vec3 fL;
void main(){ vec3 worldPos = (World*vec4(vPos,1)).xyz;! fN = (WorldIT*vec4(vNormal,0)).xyz; ! fV = CamPos - worldPos; fL = LightPos - worldPos;! gl_Position = ModelViewProj*vec4(vPos,1);}
EDA 221 - Computer graphics: Introduction to 3D
Phong Shading in GLSL
44
Camera space version
Vertex Shaderuniform mat4 ModelViewProj;uniform mat4 ModelView;uniform mat4 ModelViewIT; // Inverse Transposeuniform mat4 View;uniform vec3 LightPos; // Defined in world spacein vec3 vPos; // From applicationin vec3 vNormal;out vec3 fN; // Send to Pixel shaderout vec3 fV;out vec3 fL;
void main(){ vec3 posCamSpace = (ModelView*vec4(vPos,1)).xyz;! fN = (ModelViewIT*vec4(vNormal,0)).xyz;! fV = -posCamSpace; fL = (View*vec4(LightPos,1)).xyz - posCamSpace;! gl_Position = ModelViewProj*vec4(vPos,1);}
EDA 221 - Computer graphics: Introduction to 3D
Hardware Interpolation• Vertex attributes are interpolated for
each pixel by the graphics hardware
45
Vertex Shader
Rasterizer
Pixel Shader
EDA 221 - Computer graphics: Introduction to 3D
Polygonal Shading• Flat Shading- l, n, v constant for each triangle
- Compute shading once per triangle
• Gouraud Shading- Shade at each vertex
- Interpolate between the three vertexcolors for each fragment within triangle
• Phong Shading- Compute shading for each pixel
46
EDA 221 - Computer graphics: Introduction to 3D
Gouraud vs Phong
47
Diffuse
Ambient, diffuse & specular
Gouraud Phong
EDA 221 - Computer graphics: Introduction to 3D
Texture Mapping• “Gift-wrap” geometry
• For each vertex of the mesh, store texture coordinates (s, t)
• Use (s, t) to index into a texture (image)
• Adds detail to a mesh
• “Paste decals” onto geometry
48
EDA 221 - Computer graphics: Introduction to 3D
Texture Mapping• Specify tex coordinate at each vertex- Hardware interpolates texCoord for each pixel
• Use coordinate to lookup in texture
49
(0,1)
(0,0) (1,0)
(1,1)(s,t)=
EDA 221 - Computer graphics: Introduction to 3D
Texture Mapping in GLSL
50
in vec3 vPos;in vec2 vTexCoord;
out vec2 texCoord;uniform mat4 MVP;
void main(){! texCoord = vTexCoord.xy;!! gl_Position = MVP * vPos;}
out vec4 fColor;
uniform sampler2D Sampler;in vec2!texCoord;
void main(){! fColor = texture(Sampler,texCoord);}
Vertex shader Pixel shader
EDA 221 - Computer graphics: Introduction to 3D
Textured Phong Model• Change the diffuse factor (kd) per pixel
51
I = kaLa + kdLd max(l · n, 0) + ksLs max((r · v)↵, 0)
Ambient Diffuse Specular
= ++
= ++
EDA 221 - Computer graphics: Introduction to 3D
Texturing in Graphics
• Map detail from an image onto a 3D object
52
EDA 221 - Computer graphics: Introduction to 3D
Tangent space• Local coordinate system made up of
the tangent, binormal and normal
• Unique for each point of the surface
• Remember the sphere (lecture 3)
53
Sphere((Surface(
(Tangent,(binormal(
EDA 221 - Computer graphics: Introduction to 3D
Bump Mapping• Modify surface normal for each pixel
• Store tangent space normal in a texture
54
n
b
t
n0 = ↵t+ �b+ �n
�
↵
�
Sphere((Surface(
(Tangent,(binormal(
EDA 221 - Computer graphics: Introduction to 3D
Bump Mapping• Modify surface normal for each pixel
• Store tangent space normal in a texture
55
n
b
t
n0 = ↵t+ �b+ �n
�
↵
�
(R,G,B) ! (↵,�, �)
(127, 127, 255) ! (0, 0, 1)
[0, 255] ! [�1, 1]
EDA 221 - Computer graphics: Introduction to 3D
Coordinate Transform• From tangent space to object space- Normal in tangent space:
- Basis vectors (defined in object space):
- Normal in object space:
56
(↵,�, �)
t, b, n
↵t+ �b+ �n =
2
4| | |t b n| | |
3
5
2
4↵��
3
5
EDA 221 - Computer graphics: Introduction to 3D
Example : Bump Mapping
+
57
=
EDA 221 - Computer graphics: Introduction to 3D
Bump Mapping Summary• Derive tangent space - Compute tangent, binormal and normal in vertex
shader and pass to pixel shader
• Find tangent space normal
- Lookup (α,β,𝛾) from texture, and remap from [0,1] to [-1,1] (Colors in GLSL: [0,1] instead of [0,255])
- Express as (object space)
• Transform normal from object space to world space and shade
58
n0 = ↵t+ �b+ �n
EDA 221 - Computer graphics: Introduction to 3D
Reflection Mapping• Fast (but incorrect) way to
simulate reflection
• Use reflection vector, r, to lookup in a cube map texture
• Instead of (s,t), use a 3D direction- Direction gives a point
on unit sphere
59
! " ☀
p
nr v
EDA 221 - Computer graphics: Introduction to 3D
Reflection Mapping• Simulate highly
reflective surfaces, such as chrome, mirrors and metals
• How do we express environment?
60
EDA 221 - Computer graphics: Introduction to 3D
Cube Map• Take six photos
from the same point- With camera looking:
Front, back, left, right, up, down
• The cube approximates the spherical view
61
EDA 221 - Computer graphics: Introduction to 3D
Reflection Mapping in GLSL
62
out vec4 fColor;uniform samplerCube SkyboxTexture;
void main(){ vec3 V = normalize(...); vec3 N = normalize(...); vec3 R = reflect(-V, N); vec4 reflection = texture(SkyboxTexture, R);! fColor = reflection;}