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

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

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

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

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

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

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)

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

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.

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)

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

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

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)

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

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

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

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)

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(Ø)

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.

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

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 (Ø) )

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

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();

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

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.