Advanced Texture Mapping Bump Mapping & Environment Mapping (Reflection)

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

Per-Pixel Lighting (Phong Shading)

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>

<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>

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.

OpenGL Coordinate Systems This is where we do the lighting!

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

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

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

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

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

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

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

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

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]

Bump Mapped Cube

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 ) * 2.0 - 1.0; N.xy += texel.xy; N = normalize( N ); gl_FragColor = (ambient + diffuse) * fColor + specular; } </script>

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?

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

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).