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

SER332 Lecture 21

SER332 Lecture 21

Introduction to Graphics and Game Development
Materials
(201804)

Javier Gonzalez-Sanchez
PRO

April 10, 2018
Tweet

More Decks by Javier Gonzalez-Sanchez

Other Decks in Programming

Transcript

  1. jgs
    SER332
    Introduction to Graphics and Game
    Development
    Lecture 21: Materials
    Javier Gonzalez-Sanchez
    [email protected]
    PERALTA 230U
    Office Hours: By appointment

    View Slide

  2. jgs
    Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 2
    Original
    Enabling Light
    What happened with colors?

    View Slide

  3. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 3
    jgs
    Summary
    Ambient = 0
    Diffuse = 1
    Specular = 1
    Light
    Position= z-axis
    Type=0 (sun)
    Normals
    Per Face
    Per Vertex
    Material
    Ambient
    Diffuse
    Specular
    Emissive

    View Slide

  4. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 4
    jgs
    Material
    § Set material attributes:
    glMaterialf(v)( GLenum face, GLenum pname, TYPE param );
    glMateriali(v)( GLenum face, GLenum pname, TYPE param );
    a) face: GL_FRONT, GL_BACK, GL_FRONT_AND_BACK
    b) pname: GL_SHININESS (single value), GL_AMBIENT, GL_DIFFUSE,
    GL_SPECULAR, GL_EMISSION, GL_AMBIENT_AND_DIFFUSE
    § Example:
    GLfloat mat_diffuse[] = { 1.0, 1.0, 0.0, 0.0 };
    glMaterialfv(GL_FRONT, GL_DIFFUSE, mat_diffuse);
    Peter Wonka

    View Slide

  5. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 5
    jgs
    OpenGL Light Model
    Isurface
    = I emissive
    + Iambient
    + Idiffuse
    + I specular
    § Emissive
    § Ambient Light Reflection
    § Diffuse Reflection
    § Specular

    View Slide

  6. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 6
    jgs
    Emissive
    § Iemissive
    = k
    emissive
    § I
    emissive
    : Emissive Intensity (RGB color vector)
    § k
    emissive
    : Material Emissive Component (RGB color vector)
    § Constant over a surface
    § Independent of viewing direction
    § Independent of light source
    § Material acts as light source

    View Slide

  7. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 7
    jgs
    Emissive | Code
    GLfloat mat_emission[] = { 0.0, 0.0, 0.0, 1.0 };
    glMaterialfv(GL_FRONT, GL_EMISSION, mat_emission);
    § Four integer or floating-point values that specify the RGBA emitted light
    intensity of the material. Integer values are mapped linearly such that the
    most positive representable value maps to 1.0, and the most negative
    representable value maps to -1.0
    § Floating-point values are mapped directly. Neither integer nor floating-point
    values are clamped.
    § The initial emission intensity for both front- and back-facing materials is
    (0, 0, 0, 1)

    View Slide

  8. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 8
    jgs
    // diamond A (emissive white)
    GLfloat mat_emission[] = { 1.0, 1.0, 1.0, 1.0 };
    glMaterialfv(GL_FRONT, GL_EMISSION, mat_emission);
    glPushMatrix();
    glCallList(displayDiamond);
    glPopMatrix();
    // diamond B (default value)
    GLfloat mat_emission2[] = { 0.0, 0.0, 0.0, 1.0 };
    glMaterialfv(GL_FRONT, GL_EMISSION, mat_emission2);
    glPushMatrix();
    glTranslated(-250,0,0);
    glCallList(displayDiamond);
    glPopMatrix();
    Emissive | Example

    View Slide

  9. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 9
    jgs
    Ambient Light Reflection
    § Iambient
    = ka
    Sa
    + ka
    La
    § Sa
    : Scene Ambient Intensity
    § La
    : Ambient Light Intensity
    § ka
    : Material Ambient Reflection Coefficient
    § Constant over a surface
    § Independent of viewing direction
    § Ambient contribution comes from the
    complete scene and each individual light.

    View Slide

  10. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 10
    jgs
    Ambient Light Reflection | Code
    GLfloat val[] = { 0.0, 0.0, 0.0, 1.0 };
    glMaterialfv(GL_FRONT, GL_AMBIENT, val);
    § Four integer or floating-point values that specify the ambient RGBA
    reflectance of the material. Integer values are mapped linearly such that the
    most positive representable value maps to 1.0, and the most negative
    representable value maps to -1.0 . Floating-point values are mapped
    directly. Neither integer nor floating-point values are clamped.
    § The initial ambient reflectance for both front- and back-facing materials is
    (0.2, 0.2, 0.2, 1.0)

    View Slide

  11. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 11
    jgs
    Diffuse Reflection
    § Idiffuse
    = kd
    Ld
    cos(⍬)
    § Ld
    : Diffuse Light Intensity
    § Kd
    : Material Diffuse Reflection Coefficient
    § Lambert's cosine law: luminous intensity is directly proportional to
    the cosine of the angle θ between the direction of the incident light and the
    surface normal.
    § Angle of incidence 0 to 90 then
    surface is illuminated
    § Diffuse is 0 if light comes from backside

    View Slide

  12. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 12
    jgs
    Diffuse Reflection
    § Idiffuse
    = kd
    Ld
    cos(⍬)
    § Ld
    : Diffuse Light Intensity
    § Kd
    : Material Diffuse Reflection Coefficient
    § Result for varying values of kd
    0 0.2 0.4 0.6 0.8 1

    View Slide

  13. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 13
    jgs
    Diffuse Reflection | Code
    GLfloat val[] = { 0.0, 0.0, 0.0, 1.0 };
    glMaterialfv(GL_FRONT, GL_DIFFUSE, val);
    § Four integer or floating-point values that specify the diffuse RGBA
    reflectance of the material. Integer values are mapped linearly such that the
    most positive representable value maps to 1.0, and the most negative
    representable value maps to -1.0 . Floating-point values are mapped
    directly. Neither integer nor floating-point values are clamped.
    § The initial diffuse reflectance for both front- and back-facing materials is
    (0.8, 0.8, 0.8, 1.0)

    View Slide

  14. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 14
    jgs
    Ambient + Diffuse
    § I
    ambient
    = k
    a
    S
    a
    + k
    a
    L
    a
    § Idiffuse
    = kd
    Ld
    cos(⍬)

    View Slide

  15. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 15
    jgs
    Specular
    § Ispecular
    = ks
    Ls
    coskshiny (Ø) = W(⍬) Ls
    coskshiny (Ø)
    § Ls
    : Light specular component
    § ks
    : Material specular reflection coefficient : depends on q
    then ks
    = W(⍬) – Fresnel’s laws of Reflection
    § Kshiny
    : Material specular reflection exponent
    § Specular area is lighter because the light source is reflected directly into the
    viewer's eye

    View Slide

  16. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 16
    jgs
    Specular
    § Ispecular
    = ks
    Ls
    coskshiny (Ø) = W(⍬) Ls
    coskshiny (Ø)
    § Ls
    : Light specular component
    § ks
    : Material specular reflection coefficient : depends on q
    then ks
    = W(⍬) – Fresnel’s laws of Reflection
    § Kshiny
    : Material specular reflection exponent

    View Slide

  17. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 17
    jgs
    Specular | Code
    GL_SPECULAR
    § Four integer or floating-point values that specify the specular RGBA
    reflectance of the material. Integer values are mapped linearly such that the
    most positive representable value maps to 1.0, and the most negative
    representable value maps to -1.0 . Floating-point values are mapped
    directly. Neither integer nor floating-point values are clamped.
    § The initial specular reflectance for both front- and back-facing materials is
    (0, 0, 0, 1)

    View Slide

  18. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 18
    jgs
    Specular
    § Ispecular
    = ks
    Ls
    coskshiny (Ø) = W(⍬) Ls
    coskshiny (Ø)
    § Ls
    : Light specular component
    § ks
    : Material specular reflection coefficient : depends on q
    then ks
    = W(⍬) – Fresnel’s laws of Reflection
    § Kshiny
    : Material specular reflection exponent:
    dull (low value) to shiny (high value)
    cos256(Ø)
    cos128(Ø)
    cos8(Ø)
    cos(Ø)

    View Slide

  19. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 19
    jgs
    Specular | Code
    GL_SHININESS
    § A single integer or floating-point value.
    § Only values in the range 0 128 are accepted.
    § The initial specular exponent for both front- and back-facing materials is 0.

    View Slide

  20. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 20
    jgs
    Specular
    § Ispecular
    = ks
    Ls
    coskshiny (Ø) = W(⍬) Ls
    coskshiny (Ø)
    § Ls
    : Light specular component
    § ks
    : Material specular reflection coefficient : depends on q
    then ks
    = W(⍬) – Fresnel’s laws of Reflection
    § Kshiny
    : Material specular reflection exponent

    View Slide

  21. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 21
    jgs
    Ambient + Diffuse + Specular
    § Isurface
    = I emissive
    + Iambient
    + Idiffuse
    + I specular
    = kemissive
    + (ka
    Sa
    + ka
    La
    ) + (kd
    Ld
    cos(⍬)) + (ks
    Ls
    coskshiny (Ø) )
    = kemissive
    + ka
    Sa
    + ∑
    #
    #%&'()*
    (ka
    La
    + kd
    Ld
    cos(⍬) + ks
    Ls
    coskshiny (Ø) )

    View Slide

  22. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 22
    jgs
    Material
    http://real3dtutorials.com/tut00008.php
    Peter Wonka
    22

    View Slide

  23. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 23
    jgs
    Example
    // emerald
    GLfloat mat_emission[] = { 0.0, 0.0, 0.0, 1.0 };
    glMaterialfv(GL_FRONT, GL_EMISSION, mat_emission);
    GLfloat mat_ambient[] = { 0.0215, 0.1745, 0.0215, 1.0 };
    glMaterialfv(GL_FRONT, GL_AMBIENT, mat_ambient);
    GLfloat mat_diffuse[] = { 0.07568, 0.61424, 0.07568, 1.0 };
    glMaterialfv(GL_FRONT, GL_DIFFUSE, mat_diffuse);
    GLfloat mat_specular[] = { 0.633, 0.727811, 0.633 };
    glMaterialfv(GL_FRONT, GL_SPECULAR, mat_specular);
    glMaterialf(GL_FRONT, GL_SHININESS, 76.80);
    glPushMatrix();
    glCallList(displayDiamond);
    glPopMatrix();

    View Slide

  24. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 24
    jgs
    Example

    View Slide

  25. jgs
    SER332 Introduction to Graphics
    Javier Gonzalez-Sanchez
    [email protected]
    Spring 2018
    Disclaimer. These slides can only be used as study material for the class SER332 at ASU. They cannot be distributed or used for another purpose.

    View Slide