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. 11. Shading models Tatsuya Yatagawa

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

    Source code (fragment shader) Computer Graphics Course @Waseda University 17
  18. Shader sources n Vertex shader Computer Graphics Course @Waseda University

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

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

    University 20
  21. 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
  22. 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𝜋
  23. 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”.
  24. 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)
  25. Result n Illustrative Stanford bunny is shown. Computer Graphics Course

    @Waseda University 25
  26. 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
  27. 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
  28. Practice 11-3 Improve cartoon-like appearance of the sample program. For

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