![Page 1: Shader Applications Ed Angel Professor Emeritus of Computer Science University of New Mexico 1 E. Angel and D. Shreiner: Interactive Computer Graphics](https://reader035.vdocument.in/reader035/viewer/2022062222/5697bf701a28abf838c7da35/html5/thumbnails/1.jpg)
Shader Applications
Ed Angel
Professor Emeritus of Computer Science
University of New Mexico
1E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012
![Page 2: Shader Applications Ed Angel Professor Emeritus of Computer Science University of New Mexico 1 E. Angel and D. Shreiner: Interactive Computer Graphics](https://reader035.vdocument.in/reader035/viewer/2022062222/5697bf701a28abf838c7da35/html5/thumbnails/2.jpg)
2E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012
Objectives
•Shader Applications•Texture Mapping Applications•Reflection Maps•Bump Maps
![Page 3: Shader Applications Ed Angel Professor Emeritus of Computer Science University of New Mexico 1 E. Angel and D. Shreiner: Interactive Computer Graphics](https://reader035.vdocument.in/reader035/viewer/2022062222/5697bf701a28abf838c7da35/html5/thumbnails/3.jpg)
3E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012
Vertex Shader Applications
•Moving vertices Morphing
Wave motion
Fractals
•Lighting More realistic models
Cartoon shaders
![Page 4: Shader Applications Ed Angel Professor Emeritus of Computer Science University of New Mexico 1 E. Angel and D. Shreiner: Interactive Computer Graphics](https://reader035.vdocument.in/reader035/viewer/2022062222/5697bf701a28abf838c7da35/html5/thumbnails/4.jpg)
4E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012
Wave Motion Vertex Shader
uniform float time;uniform float xs, zs, // frequencies uniform float h; // height scaleuniform mat4 ModelView, Projection;in vec4 vPosition;
void main() { vec4 t =vPosition; t.y = vPosition.y + h*sin(time + xs*vPosition.x) + h*sin(time + zs*vPosition.z); gl_Position = Projection*ModelView*t;}
![Page 5: Shader Applications Ed Angel Professor Emeritus of Computer Science University of New Mexico 1 E. Angel and D. Shreiner: Interactive Computer Graphics](https://reader035.vdocument.in/reader035/viewer/2022062222/5697bf701a28abf838c7da35/html5/thumbnails/5.jpg)
E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012
Particle System
uniform vec3 init_vel;uniform float g, m, t;uniform mat4 Projection, ModelView;in vPosition;void main(){vec3 object_pos;object_pos.x = vPosition.x + vel.x*t;object_pos.y = vPosition.y + vel.y*t + g/(2.0*m)*t*t;object_pos.z = vPosition.z + vel.z*t;gl_Position = Projection* ModelView*vec4(object_pos,1);}
5
![Page 6: Shader Applications Ed Angel Professor Emeritus of Computer Science University of New Mexico 1 E. Angel and D. Shreiner: Interactive Computer Graphics](https://reader035.vdocument.in/reader035/viewer/2022062222/5697bf701a28abf838c7da35/html5/thumbnails/6.jpg)
6E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012
Fragment Shader Applications
Texture mapping
smooth shading environment mapping
bump mapping
![Page 7: Shader Applications Ed Angel Professor Emeritus of Computer Science University of New Mexico 1 E. Angel and D. Shreiner: Interactive Computer Graphics](https://reader035.vdocument.in/reader035/viewer/2022062222/5697bf701a28abf838c7da35/html5/thumbnails/7.jpg)
7E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012
Cube Maps
•We can form a cube map texture by defining six 2D texture maps that correspond to the sides of a box
•Supported by OpenGL•Also supported in GLSL through cubemap sampler
vec4 texColor = textureCube(mycube, texcoord);
•Texture coordinates must be 3D
![Page 8: Shader Applications Ed Angel Professor Emeritus of Computer Science University of New Mexico 1 E. Angel and D. Shreiner: Interactive Computer Graphics](https://reader035.vdocument.in/reader035/viewer/2022062222/5697bf701a28abf838c7da35/html5/thumbnails/8.jpg)
8E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012
Environment Map
Use reflection vector to locate texture in cube map
![Page 9: Shader Applications Ed Angel Professor Emeritus of Computer Science University of New Mexico 1 E. Angel and D. Shreiner: Interactive Computer Graphics](https://reader035.vdocument.in/reader035/viewer/2022062222/5697bf701a28abf838c7da35/html5/thumbnails/9.jpg)
9E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012
Environment Maps with Shaders
•Environment map usually computed in world coordinates which can differ from object coordinates because of modeling matrix
May have to keep track of modeling matrix and pass it shader as a uniform variable
•Can also use reflection map or refraction map (for example to simulate water)
![Page 10: Shader Applications Ed Angel Professor Emeritus of Computer Science University of New Mexico 1 E. Angel and D. Shreiner: Interactive Computer Graphics](https://reader035.vdocument.in/reader035/viewer/2022062222/5697bf701a28abf838c7da35/html5/thumbnails/10.jpg)
10E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012
Reflection Map Vertex Shader
uniform mat4 Projection, ModelView, NormalMatrix;in vec4 vPosition;in vec4 normal;out vec3 R;
void main(void){ gl_Position = Projection*ModelView*vPosition; vec3 N = normalize(NormalMatrix*normal); vec4 eyePos = ModelView*gvPosition; R = reflect(-eyePos.xyz, N);}
![Page 11: Shader Applications Ed Angel Professor Emeritus of Computer Science University of New Mexico 1 E. Angel and D. Shreiner: Interactive Computer Graphics](https://reader035.vdocument.in/reader035/viewer/2022062222/5697bf701a28abf838c7da35/html5/thumbnails/11.jpg)
11E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012
Reflection Map Fragment Shader
in vec3 R;uniform samplerCube texMap;
void main(void){ gl_FragColor = textureCube(texMap, R);}
![Page 12: Shader Applications Ed Angel Professor Emeritus of Computer Science University of New Mexico 1 E. Angel and D. Shreiner: Interactive Computer Graphics](https://reader035.vdocument.in/reader035/viewer/2022062222/5697bf701a28abf838c7da35/html5/thumbnails/12.jpg)
12E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012
Bump Mapping
•Perturb normal for each fragment•Store perturbation as textures
![Page 13: Shader Applications Ed Angel Professor Emeritus of Computer Science University of New Mexico 1 E. Angel and D. Shreiner: Interactive Computer Graphics](https://reader035.vdocument.in/reader035/viewer/2022062222/5697bf701a28abf838c7da35/html5/thumbnails/13.jpg)
13E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012
Normalization Maps
•Cube maps can be viewed as lookup tables 1-4 dimensional variables
•Vector from origin is pointer into table•Example: store normalized value of vector in the map
Same for all points on that vector
Use “normalization map” instead of normalization function
Lookup replaces sqrt, mults and adds
![Page 14: Shader Applications Ed Angel Professor Emeritus of Computer Science University of New Mexico 1 E. Angel and D. Shreiner: Interactive Computer Graphics](https://reader035.vdocument.in/reader035/viewer/2022062222/5697bf701a28abf838c7da35/html5/thumbnails/14.jpg)
14E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012
Introduction
•Let’s consider an example for which a fragment program might make sense
•Mapping methods Texture mapping
Environmental (reflection) mapping
• Variant of texture mapping
Bump mapping
• Solves flatness problem of texture mapping
![Page 15: Shader Applications Ed Angel Professor Emeritus of Computer Science University of New Mexico 1 E. Angel and D. Shreiner: Interactive Computer Graphics](https://reader035.vdocument.in/reader035/viewer/2022062222/5697bf701a28abf838c7da35/html5/thumbnails/15.jpg)
15E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012
Modeling an Orange
•Consider modeling an orange•Texture map a photo of an orange onto a surface
Captures dimples Will not be correct if we move viewer or light We have shades of dimples rather than their
correct orientation
• Ideally we need to perturb normal across surface of object and compute a new color at each interior point
![Page 16: Shader Applications Ed Angel Professor Emeritus of Computer Science University of New Mexico 1 E. Angel and D. Shreiner: Interactive Computer Graphics](https://reader035.vdocument.in/reader035/viewer/2022062222/5697bf701a28abf838c7da35/html5/thumbnails/16.jpg)
16E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012
Bump Mapping (Blinn)
•Consider a smooth surfacen
p
![Page 17: Shader Applications Ed Angel Professor Emeritus of Computer Science University of New Mexico 1 E. Angel and D. Shreiner: Interactive Computer Graphics](https://reader035.vdocument.in/reader035/viewer/2022062222/5697bf701a28abf838c7da35/html5/thumbnails/17.jpg)
17E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012
Rougher Version
n’
p
p’
![Page 18: Shader Applications Ed Angel Professor Emeritus of Computer Science University of New Mexico 1 E. Angel and D. Shreiner: Interactive Computer Graphics](https://reader035.vdocument.in/reader035/viewer/2022062222/5697bf701a28abf838c7da35/html5/thumbnails/18.jpg)
18E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012
Equations
pu=[ ∂x/ ∂u, ∂y/ ∂u, ∂z/ ∂u]T
p(u,v) = [x(u,v), y(u,v), z(u,v)]T
pv=[ ∂x/ ∂v, ∂y/ ∂v, ∂z/ ∂v]T
n = (pu pv ) / | pu pv |
![Page 19: Shader Applications Ed Angel Professor Emeritus of Computer Science University of New Mexico 1 E. Angel and D. Shreiner: Interactive Computer Graphics](https://reader035.vdocument.in/reader035/viewer/2022062222/5697bf701a28abf838c7da35/html5/thumbnails/19.jpg)
19E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012
Tangent Plane
pu
pv
n
![Page 20: Shader Applications Ed Angel Professor Emeritus of Computer Science University of New Mexico 1 E. Angel and D. Shreiner: Interactive Computer Graphics](https://reader035.vdocument.in/reader035/viewer/2022062222/5697bf701a28abf838c7da35/html5/thumbnails/20.jpg)
20E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012
Displacement Function
p’ = p + d(u,v) n
d(u,v) is the bump or displacement function
|d(u,v)| << 1
![Page 21: Shader Applications Ed Angel Professor Emeritus of Computer Science University of New Mexico 1 E. Angel and D. Shreiner: Interactive Computer Graphics](https://reader035.vdocument.in/reader035/viewer/2022062222/5697bf701a28abf838c7da35/html5/thumbnails/21.jpg)
21E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012
Perturbed Normal
n’ = p’u p’v
p’u = pu + (∂d/∂u)n + d(u,v)nu
p’v = pv + (∂d/∂v)n + d(u,v)nv
If d is small, we can neglect last term
![Page 22: Shader Applications Ed Angel Professor Emeritus of Computer Science University of New Mexico 1 E. Angel and D. Shreiner: Interactive Computer Graphics](https://reader035.vdocument.in/reader035/viewer/2022062222/5697bf701a28abf838c7da35/html5/thumbnails/22.jpg)
22E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012
Approximating the Normal
n’ = p’u p’v
≈ n + (∂d/∂u)n pv + (∂d/∂v)n pu
The vectors n pv and n pu lie in the tangent plane Hence the normal is displaced in the tangent planeMust precompute the arrays ∂d/ ∂u and ∂d/ ∂v
Finally,we perturb the normal during shading
![Page 23: Shader Applications Ed Angel Professor Emeritus of Computer Science University of New Mexico 1 E. Angel and D. Shreiner: Interactive Computer Graphics](https://reader035.vdocument.in/reader035/viewer/2022062222/5697bf701a28abf838c7da35/html5/thumbnails/23.jpg)
23E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012
Image Processing
•Suppose that we start with a function d(u,v)
•We can sample it to form an array D=[dij]
•Then ∂d/ ∂u ≈ dij – di-1,j
and ∂d/ ∂v ≈ dij – di,j-1
•Embossing: multipass approach using floating point buffer
![Page 24: Shader Applications Ed Angel Professor Emeritus of Computer Science University of New Mexico 1 E. Angel and D. Shreiner: Interactive Computer Graphics](https://reader035.vdocument.in/reader035/viewer/2022062222/5697bf701a28abf838c7da35/html5/thumbnails/24.jpg)
Example
24E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012
Single Polygon and a Rotating Light Source
![Page 25: Shader Applications Ed Angel Professor Emeritus of Computer Science University of New Mexico 1 E. Angel and D. Shreiner: Interactive Computer Graphics](https://reader035.vdocument.in/reader035/viewer/2022062222/5697bf701a28abf838c7da35/html5/thumbnails/25.jpg)
25E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012
How to do this?
•The problem is that we want to apply the perturbation at all points on the surface
•Cannot solve by vertex lighting (unless polygons are very small)
•Really want to apply to every fragment•Can’t do that in fixed function pipeline•But can do with a fragment program!!