Advanced Texture Mapping Bump Mapping & Environment Mapping (Reflection)

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

Per-Pixel Lighting (Phong Shading)

Per-Pixel Lighting (HTML code)HTML code 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; }

... vec4 L = normalize( lightPosition - fPosition ); vec4 N = 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; }

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

OpenGL Coordinate Systems

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

9 Mapping Variations smooth shadingenvironment 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’n’ p p’ Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015

12 Tangent Plane pupu pvpv n Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015

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

14 Equations p u =[ ∂x/ ∂u, ∂y/ ∂u, ∂z/ ∂u] T p(u,v) = [x(u,v), y(u,v), z(u,v)] T p v =[ ∂x/ ∂v, ∂y/ ∂v, ∂z/ ∂v] T n = (p u  p v ) / | p u  p v | 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

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

Bump Mapped Cube

Bump Mapped Cube (HTML code)HTML code... 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; }

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

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

Midterm Exam on 12/2 How to add user interface elements in HTML and event handlers in JS? How to add new vertex attributes (in both shaders and JS)? How to add new varying parameters? How to pass uniform variables to the shaders? How to make minor change to vertex shaders and fragment shaders? You will be asked to modify existing codes to achieve the goals defined in the problems. 21