1. Advanced Texture Mapping
Bump Mapping & Environment Mapping (Reflection)

2. For Further Reading
Angel 7th Ed:
Chapter 7: 7.7 ~ 7.9

3. Per-Pixel Lighting (Phong Shading)

4. Per-Pixel Lighting (HTML code)
<script id="vertex-shader" type="x-shader/x-vertex"> precision mediump float; ... varying vec4 fPosition; varying vec4 fColor; varying vec4 fNormal; void main() { vec4 N = normalize( modelingMatrix * vNormal ); fPosition = modelingMatrix * vPosition; fColor = vColor; fNormal = N; gl_Position = projectionMatrix * viewingMatrix * modelingMatrix * vPosition; } </script>

5. <script id="fragment-shader" type="x-shader/x-fragment">
<script id="fragment-shader" type="x-shader/x-fragment"> ... vec4 L = normalize( lightPosition - fPosition ); vec4 N = normalize( fNormal ); vec4 V = normalize( eye - fPosition ); vec4 H = normalize( L + V ); // Compute terms in the illumination equation float Ks = pow( max(dot(N, H), 0.0), shininess ); vec4 specular = Ks * materialSpecular; gl_FragColor = (ambient + diffuse) * fColor + specular; } </script>

6. Changes in GLSL Shaders
Phong lighting moved to the fragment shader:
New varying variables for positon and normal.
Modeling, viewing, projection matrices in both shaders.  need consistent float precision
“precision mediump float” added to both shaders to guarantee consistent float precision.

7. OpenGL Coordinate Systems
This is where we do the lighting!

8. 3D Viewing Process 3D viewing process VC WC MC NC PC DC Viewing
Transformation VC
View
Space
Model
Transformation WC
World
Space MC
Model
Space
Normalization
& Clipping NC
Normalize
Space
Projection
Transformation PC
Projection (Clip)
Viewport
Transformation DC
Display
Space

9. Mapping Variations smooth shading environment mapping bump mapping
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015

10. Bump Mapping (Blinn) Consider a smooth surface n p
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015

11. Rougher Version n’ p’ p
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015

12. Tangent Plane pv n pu
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015

13. Tangent, Normal, Binormal
Pu, N, Pv are also known as Tangent, Normal, and Binormal (TNB) vectors.

14. Equations p(u,v) = [x(u,v), y(u,v), z(u,v)]T
pu=[ ∂x/ ∂u, ∂y/ ∂u, ∂z/ ∂u]T
pv=[ ∂x/ ∂v, ∂y/ ∂v, ∂z/ ∂v]T
n = (pu  pv ) / | pu  pv |
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015

15. Displacement Function
p’ = p + d(u,v) n
d(u,v) is the bump or displacement function
|d(u,v)| << 1
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015

16. Bump Map Example Storing the normal perturbation in RGB channels.
Changes of normal vector are stored in R and G channels as [dX, dY].
Range of [0, 1] must be converted to [-1,1]

17. Bump Mapped Cube

18. Bump Mapped Cube (HTML code)
<script id="fragment-shader" type="x-shader/x-fragment"> ... void main() { // Normal variation stored in the texture is within [0,1]. // Convert it to [-1, 1] vec4 texel = texture2D( texture, fTexCoord ) * ; N.xy += texel.xy; N = normalize( N ); gl_FragColor = (ambient + diffuse) * fColor + specular; } </script>

19. Lab Time! Download cube3_bump_lab.html and .js
Task #1: Fix the JS code that is missing the array buffer and vertex attribute for the texture coordinates.
Task #2: Modify the normal vector in the fragment shader so the bump map influence the lighting.
Task #3: Do you think the shader is 100% correct? If not, then what is wrong?

20. Tangent, Normal, Binormal
What does the (dX, dY) in bump map mean?

21. texel.xy should be applied to the tangent plane spanned by T and B.
N.xy += texel.xy is correct only if N is along the Z direction. i.e. N=(0,0,1) or (0,0,-1).
texel.xy should be applied to the tangent plane spanned by T and B.
But where do we get T and B in the shaders?
Needs tangent vector (T) as a new vertex attribute, just like the normal vector (N).