Upgrade to Pro — share decks privately, control downloads, hide ads and more …

11. Shading models

11. Shading models

Tatsuya Yatagawa

May 14, 2021

More Decks by Tatsuya Yatagawa

Other Decks in Technology


  1. 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!!
  2. 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
  3. 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
  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
  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
  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!
  7. 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
  8. 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
  9. 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, 𝐧 ⋅ 𝐥 𝐿' 𝑘# 𝐧 𝐥
  10. 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
  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
  12. 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)
  13. 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! 𝐯& = 𝐕𝐌 𝐯' 𝐧& = 𝐕𝐌 () 𝐧' 𝐧& ⋅ 𝐯& = 𝐧& )𝐯& = 𝐧' ) 𝐕𝐌 (*𝐕𝐌 𝐯' = 𝐧' ) 𝐯' = 𝐧' ⋅ 𝐯'
  14. 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)
  15. 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
  16. Pass parameters as uniform variables n Source code (C++) n

    Source code (fragment shader) Computer Graphics Course @Waseda University 17
  17. 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
  18. 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𝜋
  19. 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”.
  20. 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)
  21. 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
  22. 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
  23. Practice 11-3 Improve cartoon-like appearance of the sample program. For

    details, refer to the slides following. Computer Graphics Course @Waseda University 28
  24. 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
  25. 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
  26. 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)
  27. 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?
  28. 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
  29. 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...
  30. 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.
  31. 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!
  32. 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)
  33. 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!
  34. 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 𝐷 − 𝜕𝑢 𝜕𝑦 ⋅ 𝜕𝐩 𝜕𝑥 + 𝜕𝑢 𝜕𝑥 ⋅ 𝜕𝐩 𝜕𝑦 𝐷 = 𝜕𝑢 𝜕𝑥 ⋅ 𝜕𝑣 𝜕𝑦 − 𝜕𝑣 𝜕𝑥 ⋅ 𝜕𝑢 𝜕𝑦
  35. 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!