11. Shading models Tatsuya Yatagawa

Last image for Stanford bunny Computer Graphics Course @Waseda University 2 Colorized with normals “Real” Stanford bunny (*1) *1) The Stanford 3D Scanning Repository, http://graphics.stanford.edu/data/3Dscanrep/ Objects are colored and shaded in real world!!

Shade and shadow n Shade and shadow is technically different n Shade is dark region which is weakly lit. Typically, dependent on object shape (in Japanese 陰). n Shadow is the region which is occluded by other object and is not directly lit (in Japanese 影). Computer Graphics Course @Waseda University 3 Shadow Shade

Shading and reflection models n Shading model n How to calculate “shades” with Graphics API n Gouraud shading (faster, but less realistic) n Phong shading (realistic, but a bit slower) n Reflection model n Numerical modeling of reflection as an optical phenomenon n Lambert reflection model (diffuse surface) n Phong reflection model (specular surface) n Blinn-Phong reflection model (specular surface) Computer Graphics Course @Waseda University 4

Gouraud shading n Algorithm n Each vertex is shaded in “vertex shader.” n Internal triangle area is interpolation by rasterizer. n Fragment shader do nothing but passing interpolated colors. Computer Graphics Course @Waseda University 5

Phong shading n Algorithm n Vertex attributes (i.e., normals, colors) are interpolated for internal triangle area. n Each pixel is shaded in “fragment shader.” Computer Graphics Course @Waseda University 6

Comparison Computer Graphics Course @Waseda University 7 Gouraud shading Phong shading Low calculation load J Low image quality L High calculation load L High image quality J However, current compute is fast, and can afford to use Phong shading!

Reflection model n Optical reflection on object surface n Roughly, it’s modeled as a ratio of outgoing light intensity to incoming light intensity. n Strictly, it’s a ratio of n Incoming irradiance (Light energy per unit area, 放射照度) n Outgoing radiance (Light energy per unit area and unit solid angle, 放射輝度) n Technically, it’s called “BRDF” (bidirectional reflection distribution function). Computer Graphics Course @Waseda University 8 𝐸(𝜔! ) 𝐿(𝜔" ) 𝑓 𝜔!, 𝜔" = 𝑑𝐿(𝜔") 𝑑𝐸(𝜔!) BRDF

Diffuse, specular and ambient lights n In real-time CG, reflection is separately modeled for n Diffuse is weakly dependent on incident direction. n Specular is strongly dependent on incident direction. n Ambient is like an offset of brightness, which is not strictly based on physics. Computer Graphics Course @Waseda University 9 引用: コンピュータグラフィックス [改訂新版] (コンピュータグラフィックス編集委員会 著) P.142

Diffuse reflection (Lambert model) n Incident light is reflected uniformly over upper hemisphere Computer Graphics Course @Waseda University 10 : diffuse reflection ratio (albedo) : normal vector : unit vector to light position Why does uniform reflection include dot product??? 𝐿& = 𝑘& 𝜋 max 0, 𝐧 ⋅ 𝐥 𝐿' 𝑘# 𝐧 𝐥

Diffuse reflection (Lambert model) n Intensity of incident “irradiance” depends on incident direction n Irradiance is light energy per “unit area.” n Shallow incident light beam makes wider footprint. Computer Graphics Course @Waseda University 11

Specular reflection (Phong model) n Dot product of normal and direction of reflection Computer Graphics Course @Waseda University 12 : shininess (higher shininess means more like mirror) : unit vector for direction of reflection (= 𝟐 𝐧 ⋅ 𝐥 𝐧 − 𝐥) 𝐿$ = 𝑘$ 𝜋 max 0, 𝐯 ⋅ 𝐫 %𝐿! 𝐯 𝐫 𝛼 : unit vector to camera center

Specular reflection (Blinn-Phong model) n Dot product of normal and half vector n Half vector is intermediate direction of directions to viewer and light. n More realistic for backward reflection. n Legacy OpenGL shading uses Gourand shading with Blinn- Phong reflection. Computer Graphics Course @Waseda University 13 𝐿$ = 𝑘$ 𝜋 max 0, 𝐧 ⋅ 𝐡 %𝐿! 𝐡 = 𝐯 + 𝐥 𝐯 + 𝐥 (half vector)

Shading using shader programs n Typically calculated in camera space n Camera center is at the origin. n Calculation and required data will be smaller. n Attributes in camera space n Positions → multiply model-view matrix. n Normals → multiply “inverse transpose” of model-view matrix. Computer Graphics Course @Waseda University 14 dot product does not change! 𝐯& = 𝐕𝐌 𝐯' 𝐧& = 𝐕𝐌 () 𝐧' 𝐧& ⋅ 𝐯& = 𝐧& )𝐯& = 𝐧' ) 𝐕𝐌 (*𝐕𝐌 𝐯' = 𝐧' ) 𝐯' = 𝐧' ⋅ 𝐯'

Light position in camera space n This time, light is assumed to be a point (= point light) n Light is one of the model (while it is a point). n Normally, a model matrix for the light is prepared. n In sample program, light is stationary and not transformed (lightMat is matrix to transform light position to “camera space”). Computer Graphics Course @Waseda University 15 Point light is stationary. (V x I = V)

Definition of materials n Current reflection model is not based on physics n Parameters (albedo, shininess) is defined based on heuristics n Reference: http://www.barradeau.com/nicoptere/dump/materials.html n This time, “Gold” in above link is used (based on Blinn-Phong shading). Computer Graphics Course @Waseda University 16

Pass parameters as uniform variables n Source code (C++) n Source code (fragment shader) Computer Graphics Course @Waseda University 17

Shader sources n Vertex shader Computer Graphics Course @Waseda University 18

Shader sources n Fragment shader Computer Graphics Course @Waseda University 19

Result n Golden bunny is shown Computer Graphics Course @Waseda University 20

Point light in strict physics n In current model, light reaches different positions with same intensity. n Strictly, density of light flux is decreased at distant locations. Computer Graphics Course @Waseda University 21 Low density High density

Point light in strict physics n Formally, intensity of point light is defined by “radiant intensity” n Radiant intensity 𝐼 𝑥+ is light energy per unit solid angle. n Therefore, irradiance given by a point light is inversely proportional to surface area corresponding to the solid angle. Computer Graphics Course @Waseda University 22 𝑑𝐸 𝑥 𝑑𝜔 = 𝐼 𝑥# cos 𝜃 𝑥# − 𝑥 $ 𝐼 𝑥# = Φ(𝑥# ) 4𝜋

Non-photorealistic rendering (NPR) n Shading method for illustrating object appearance n Intensely studied in 1990 - 2005 n Originally, it aimed to draw mechanical parts for intuitive understanding. Computer Graphics Course @Waseda University 23 [Gooch et al. 1998] (*2) [Saito and Takahashi 1990] (*1) *1) Saito and Takahashi 1990, “Comprehensible Rendering of 3-D Shapes”. *2) Gooch et al. 1998, “A Non-Photorealistic Lighting Model For Automatic Technical Illustration”.

Cartoon shading (one of NPR) n Using 1D discrete color texture n Associate “magnitude of diffuse reflection” (dot product of normal and light direction) with “texture color” at 1D discrete color bar. n In a sample code, texture is 2D but color along U-axis is only changed. Computer Graphics Course @Waseda University 24 Dark color (diffuse = 0) Bright color (diffuse = 1)

Result n Illustrative Stanford bunny is shown. Computer Graphics Course @Waseda University 25

Practice 11-1 Implement Gouraud shading based on the sample program using Phong shading. n Hint: It’s not really difficult. Calcualte shading in vertex shader and just use it as output color in fragment shader. Computer Graphics Course @Waseda University 26 Gouraud shading Phong shading

Practice 11-2 Draw a textured dice that is shaded by Lambert and Blinn- Phong reflection model. n Shade dice with Lambert (diffuse) and Blinn-Phong (specular) reflection models. n Use dice texture to define diffuse and ambient colors (see sample code below). Computer Graphics Course @Waseda University 27

Practice 11-3 Improve cartoon-like appearance of the sample program. For details, refer to the slides following. Computer Graphics Course @Waseda University 28

Practice 11-4 Visualize bumpy surface appearance using normal mapping. n Hint: For normal mapping, local coordinate axes must be calculated (see the slides following). n Hint: Fortunately, they can be calculated in fragment shader as in Practice 10-1! Computer Graphics Course @Waseda University 29

Texture mapping in GLSL n Source code (C++) n glActiveTexture: Activate specified texture unit. n glBindTexture: Bind texture to active texture unit. → Specify texture “unit index” as a uniform variable! (do not specify textureId!!!) Computer Graphics Course @Waseda University 30

Texture mapping in GLSL n Source code (fragment shader) Computer Graphics Course @Waseda University 31 Variable type will be like “samplerXD” “texture” method gives 4D color value (.rgb extracts only the first 3 dimension)

Advanced cartoon shading n Let us add following components: Computer Graphics Course @Waseda University 32 Contour lines Dotted highlights Hatched shade How can they be achieved?

Contour lines n Where contour lines should be drawn? n At the contour, normal is almost perpendicular to viewing direction. n In camera space, visible surface has positive Z-value. → Check Z-value of camera-space normal is near to zero. Computer Graphics Course @Waseda University 33 x y z x y z

Dotted highlight / hatched shadow n Use texture to apply dot/hatch patterns n When specular reflection is strong, apply dot pattern. n When diffuse reflection is weak, apply hatch pattern. Computer Graphics Course @Waseda University 34 Unfortunately, using object’s texture coordinates distort these patterns...

How to show non-distorted texture? n Use gl_FragCoord in fragment shader n gl_FragCoord.xy gives on-screen location in in “pixels” n So, use it as texture coordinates to access dot/hatch texture. Specify “GL_TEXTURE_WRAP_X” is set by “GL_REPEAT” Computer Graphics Course @Waseda University 35 Maybe, you should first check dot/hatch texture can be drawn properly with gl_FragCoord.

Normal mapping n Texture for normal mappling Computer Graphics Course @Waseda University 36 Reflection color Local normals Normal map represents normal in local coordinate system. (front direction of the image corresponds to z-axis) 球上での局所座標系 Actual normal is obtained by: 𝐧 = 𝐧%,#"'(# 𝐞% + 𝐧),#"'(# 𝐞) + 𝐧*,#"'(# 𝐞* y-axis x-axis z-axis Only required items are local coordinate axes!

Derive local coordinate axes n Local coordinates involve with “texture coordinates” (in other words, “parameter coordinates”). n By differential geometry, local coordinate axes are defined as: Computer Graphics Course @Waseda University 37 (tangent vector along 𝑢 direction = tangent) (tangent vector along v direction = binormal) 𝐞% = normalize 𝜕𝐩 𝜕𝑢 𝐞) = normalize 𝜕𝐩 𝜕𝑣 𝐞* = 𝐞% ×𝐞) (surface normal)

Derive local coordinate axes n In fragment shader, dFdx and dFdy give derivatives of vertex position and texture coordinate. Computer Graphics Course @Waseda University 38 𝐩: vertex position 𝐮: texture coordinate screen pixels 𝜕𝐩 𝜕𝑥 = dFdx 𝐩 , 𝜕𝐩 𝜕𝑦 = dFdy 𝐩 , 𝜕𝐮 𝜕𝑥 = dFdx 𝐮 , 𝜕𝐮 𝜕𝑦 = dFdy 𝐮 , 𝜕𝐩 𝜕𝑥 = 𝜕𝑢 𝜕𝑥 ⋅ 𝜕𝐩 𝜕𝑢 + 𝜕𝑣 𝜕𝑥 ⋅ 𝜕𝐩 𝜕𝑣 𝜕𝐩 𝜕𝑦 = 𝜕𝑢 𝜕𝑦 ⋅ 𝜕𝐩 𝜕𝑢 + 𝜕𝑣 𝜕𝑦 ⋅ 𝜕𝐩 𝜕𝑣 chain rule of partial derivative (known values, unknown values) It’s simple linear system!

Derive local coordinate axes n In fragment shader, dFdx and dFdy give derivatives of vertex position and texture coordinate. Computer Graphics Course @Waseda University 39 𝐩: vertex position 𝐮: texture coordinate screen pixels 𝜕𝐩 𝜕𝑥 = 𝜕𝑢 𝜕𝑥 ⋅ 𝜕𝐩 𝜕𝑢 + 𝜕𝑣 𝜕𝑥 ⋅ 𝜕𝐩 𝜕𝑣 𝜕𝐩 𝜕𝑦 = 𝜕𝑢 𝜕𝑦 ⋅ 𝜕𝐩 𝜕𝑢 + 𝜕𝑣 𝜕𝑦 ⋅ 𝜕𝐩 𝜕𝑣 solve (simple 2x2 matrix inverse) 𝜕𝐩 𝜕𝑢 = 1 𝐷 𝜕𝑣 𝜕𝑦 ⋅ 𝜕𝐩 𝜕𝑥 − 𝜕𝑣 𝜕𝑥 ⋅ 𝜕𝐩 𝜕𝑦 𝜕𝐩 𝜕𝑣 = 1 𝐷 − 𝜕𝑢 𝜕𝑦 ⋅ 𝜕𝐩 𝜕𝑥 + 𝜕𝑢 𝜕𝑥 ⋅ 𝜕𝐩 𝜕𝑦 𝐷 = 𝜕𝑢 𝜕𝑥 ⋅ 𝜕𝑣 𝜕𝑦 − 𝜕𝑣 𝜕𝑥 ⋅ 𝜕𝑢 𝜕𝑦

Shading process in fragment shader Computer Graphics Course @Waseda University 40 texture repetition (4 times) normal tangent binormal n Consider the shader code to derive local coordinate axes using the preceding slides!