11. Shading models

Transcript

1. 11. Shading models
   Tatsuya Yatagawa
   

   View Slide

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

   View Slide

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
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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!
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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, 𝐧 ⋅ 𝐥 𝐿'
    𝑘#
    𝐧
    𝐥
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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)
    

    View Slide

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!
    𝐯& = 𝐕𝐌 𝐯' 𝐧& = 𝐕𝐌 () 𝐧'
    𝐧& ⋅ 𝐯& = 𝐧&
    )𝐯&
    = 𝐧'
    ) 𝐕𝐌 (*𝐕𝐌 𝐯'
    = 𝐧'
    ) 𝐯' = 𝐧' ⋅ 𝐯'
    

    View Slide

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)
    

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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𝜋
    

    View Slide

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

    View Slide

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)
    

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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)
    

    View Slide

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?
    

    View Slide

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
    

    View Slide

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

    View Slide

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.
    

    View Slide

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!
    

    View Slide

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)
    

    View Slide

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!
    

    View Slide

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
    𝐷
    −
    𝜕𝑢
    𝜕𝑦
    ⋅
    𝜕𝐩
    𝜕𝑥
    +
    𝜕𝑢
    𝜕𝑥
    ⋅
    𝜕𝐩
    𝜕𝑦
    𝐷 =
    𝜕𝑢
    𝜕𝑥
    ⋅
    𝜕𝑣
    𝜕𝑦
    −
    𝜕𝑣
    𝜕𝑥
    ⋅
    𝜕𝑢
    𝜕𝑦
    

    View Slide

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!
    

    View Slide