Computer Graphics CSI4130 – Winter 2019
Jochen Lang
EECS, University of Ottawa Canada
This Lecture
• Shading
– Textbook: Chapter 5.1, 5.2, 5.3 – Traditional OpenGL shading
• Diffuse shading
• Phong shading – Light sources
• Point lights
• Spot lights
• Directional lights
– Alternative shading models
– OpenGL uniform buffer objects
CSI4130 Computer Graphics
Light Reflection
• Light
– electromagnetic wave – flux or power
– radiometry – science of light measurement
• Colour
– wavelength spectrum but human vision is based on
tristimulus colour vision
– Different colour models, e.g., RGB (mixes luminance and chrominance)
• Reflection
– different reflectors, e.g., mirrors, matt surfaces, glossy or
specular surfaces
– colour is a result of different absorption
CSI4130 Computer Graphics
Geometry of Reflection
• Definition of viewing vectors:
– light direction l, viewing direction e, surface normal n,
halfway vector h, mirror direction r
– Vectors and
are in a plane
– Vectors are in another
plane (in general)
– Angles and are in
neither of these planes (in general)
CSI4130 Computer Graphics
Diffuse Shading:
Lambert Reflection Model
• Completely diffuse behavior (colour ):
– Light is reflected equally in all direction
– Surface appears brighter if lit normal than under oblique
angles (cosine term)
– No illumination from behind the surface
– Reflection depends on light source colour
CSI4130 Computer Graphics
Ambient Shading
– Trick to make all surfaces in a scene visible – Approximates diffuse indirect illumination
• Light reaches all surfaces even if they do not directly face a light source.
• illuminates all visible surfaces
• light should not be amplified at a surface
CSI4130 Computer Graphics
Phong Shading [Com. of ACM, 1975]
– Adds a specular cosine lobe in the mirror direction to the reflection behaviour
– Used together with a diffuse (Lambert) model – Simple
cosine lobe
diffuse (hemisphere)
CSI4130 Computer Graphics
Phong Shading Model
– Lobe in mirror direction
– Exponent controls width of highlight
– Specular constant adjusts relative weight w.r.t. diffuse component
– Originally
– Reflection direction
• Modified Blinn-Phong*) model – Normalized half-way vector
*) Blinn, SIGGRAPH 1977
CSI4130 Computer Graphics
Traditional OpenGL Hardware Reflection Model
– Ambient, diffuse and specular component
– Diffuse material colour
– Ambient colour
– Specular material colour – Light colour
• Additionally, in OpenGL
– Separate ambient light colour ,, diffuse light colour ,
and specular light colour
– Emissive colour
CSI4130 Computer Graphics
,
“Gouraud” Shading
• Usual meaning:
– Interpolate vertex colors smoothly within a polygon
– In OpenGL we can qualify the output of the vertex shader and input to the fragment shader
• flat, noperspective, smooth
• Aside original meaning:
– Vertex normals are calculated as the average face normal of
neighbouring faces
CSI4130 Computer Graphics
Illumination Types: Directional Light Sources
– Infinitely far away light source (e.g., sun). All light rays are assumed to be parallel coming from a specified direction.
– Specify as a homogenous direction vector, e.g., • vec4f( 0.0f, 0.0f, -1.0f, 0.0f )
– is light source in the direction of the viewing*. *Assumes modelview matrix is set to identity.
CSI4130 Computer Graphics
Illumination Types: Point Light Sources
• Point Light Sources
– Light source close to scene which shines light in all
directions. The irradiance on a surface decreases with .
– OpenGL full attenuation hardware model is
CSI4130 Computer Graphics
Illumination Types: Spot Light Sources
• Spot Light Sources
– Same as point light sources but light is only emitted in a cone of directions. The irradiance in the cone may have a fall-off.
Cut-off angle
Spot light direction
cosine fall-off
CSI4130 Computer Graphics
WebGL Phong Demo
• Phong shader in WebGL 1
– http://www.cs.toronto.edu/~jacobson/phong-demo/ – or at the Uni Marburg
• Lab 7 for WebGL 2.0
• MeshPhongMaterial in Three.js
• OpenGL fixed pipeline demo
– Old but still instructive
– see http://www.xmission.com/~nate/tutors.html
CSI4130 Computer Graphics
Limitations of Fixed Pipeline Illumination Model – Reflection
• Blinn-Phong model is known to not match real-world reflection well. Especially for metals, anisotropic materials, complex materials
• Use of programmable hardware enables arbitrary reflection models.
• Reflection Models:
– Cook and Torrance
• Models metals much better than Blinn-Phong
• Physics-based using Fresnel term and material microgeometry
CSI4130 Computer Graphics
Other Reflection Models
• Ashikhmin, Premože and Shirley
– Physics-based but with more general model of
microgeometry then Cook and Torrance
ACM Copyright Notice: Permission to make digital or hard copies of part or all of this work for personal or classroom use is granted without fee provided that copies are not made or distributed for profit or commercial advantage and that copies bear this notice and the full citation on the first page. Copyrights for components of this work owned by others than ACM must be honored. Abstracting with credit is permitted. To copy otherwise, to republish, to post on servers or to redistribute to lists, requires prior specific permission and/or a fee.
Satin
CSI4130 Computer Graphics
Velvet
Other Reflection Models
• Ward
– Experimental
– Relatively simple to implement in hardware
– Models anisotropic materials well • Lafortune
– Extension of Blinn-Phong to multiple lobes – Efficient to render, increased realism
CSI4130 Computer Graphics
Limitations of Fixed Pipeline Illumination Model – Lighting
• Light sources
– area lights and volume lights
– approximating real lights more closely, e.g., neon lights – real lighting environment through image-based lighting
• Indirect lighting
– ambient term is a very crude approximation
– ambient occlusion is simple way to improve appearance
– full indirect lighting requires a global illumination solution (e.g., path tracing)
• Shadows
– Visibility is not taken into account in rasterization
– Different techniques: shadow mapping, shadow volumes or global illumination
CSI4130 Computer Graphics
Aside: Setting Light Source and Material Parameters in a Shader
• Different options – plain uniforms
• but there are many parameters – uniforms organized as structure
• structure can be operated on as whole
• must be careful to match layout in C and GLSL – uniformbufferobjectsUBO
• easy transfer, just as any other buffer object • but a bit involved to set up
CSI4130 Computer Graphics
Uniform Structures
• Each light source has many uniform parameters
• Organize in a structure
• Fragment shader Example:
struct LightSource {
vec4 ambient;
vec4 diffuse;
vec4 specular;
vec3 spot_direction;
float spot_exponent;
float spot_cutoff;
float constant_attenuation;
float linear_attenuation;
float quadratic_attenuation;
};
uniform LightSource lights[2];
CSI4130 – Computer Graphics
Setting Uniforms in Structures
• Need to find the location of each variable in the array of structures
// need to find the location of all entries in the
// structure
let locA = gl.getUniformLocation(program,
‘lights[0].ambient’);
let ambient =
glMatrix.vec4.fromValues( 0.1, 0.1, 0.1, 1.0 );
gl.uniform4fv(locAmb, ambient);
// Different types need different calls
let locE = gl.getUniformLocation(program,
‘lights[0].spot_exponent’);
gl.uniform1f(locE, spot_exponent);
CSI4130 – Computer Graphics
let spot_exponent = 1.0;
Using Uniform Blocks
• Uniforms (as well as in and out variables) can be grouped in a block
• In the example below only one uniform is grouped
• Looks pointless but …
struct Material {
vec4 emissive;
vec4 ambient;
vec4 diffuse;
vec4 specular;
};float shininess;
layout (std140) uniform MaterialBlock {
};uniform Material materials[4];
CSI4130 – Computer Graphics
Uniform Buffer Objects
•
• •
Uniform blocks can be filled from an uniform buffer object (UBO)
UBOs are like any other buffer object Corresponding javascript code
let ubo = gl.createBuffer(); gl.bindBuffer(gl.UNIFORM_BUFFER, ubo); gl.bufferData(gl.UNIFORM_BUFFER, matArraySize,
gl.STATIC_DRAW ); // reserve the memory
Setting the buffer content can be done either with
gl.bufferData, gl.bufferSubData
CSI4130 – Computer Graphics
•
Linking the UBO to the Uniform Block
• Uniform blocks have an id and can be linked to an uniform buffer object (UBO)
• Javascript example
let bI = gl.getUniformBlockIndex(gl_program, ‘MaterialBlock’); gl.uniformBlockBinding( g_program, bI, 0); gl.bindBufferBase(gl.UNIFORM_BUFFER, 0, ubo);
layout (std140)
uniform MaterialBlock
{…};
UniformBlockIndex bI
UBO
CSI4130 – Computer Graphics
Uniform Block
Binding Point 0
Memory Layout of Uniforms
• Uniform blocks can be layout differently
• Options are:
– Shared (default)
• GLSL compiler finds an efficient layout such that the buffer can be shared between multiple GLSL programs
• Need to use glGetUniformIndices and glGetActiveUniforms to get information on the layout
– std140
• Shading language 1.4 version that uses a fixed aligned layout (simple rules, see OpenGL ES spec or red book)
– std430 (not in WebGL) – packed (not in WebGL)
CSI4130 – Computer Graphics
Memory Buffer
• std140 layout for our array of structures
• vec4 is 4 floats (4 bytes each)
• Offset is the size of the largest data member (vec4)
struct Material {
vec4 emissive;
vec4 ambient;
vec4 diffuse;
vec4 specular;
float shininess;
//Offset //0
// 16
// 32
// 48 // 64
Size Padded Size 16 16
16 16
16 16
16 16 4 16
};
CSI4130 – Computer Graphics
Efficient Transfer
• Copy a properly padded Javascript-array at once
• Javascript example setting one structure at a time of an
array of size 10
let material = [];
for ( let i=0; i<10; ++i )
material.push(new Float32Array(20));
let fsize = Material.BYTES_PER_ELEMENT;
// Loop over Array
for (let i=0; i