程序代写代做代考 clock js flex html Chapter 3 CSCI-396 Jeff Bush

Chapter 3 CSCI-396 Jeff Bush

¡ So far our objects look unrealistic and “flat” ¡ If we draw a sphere we get:
¡ But we want something more like:
2

¡ The difference is that light-material interactions cause each point on the surface to visually have a different color or shade
§ The object itself is still one uniform color but the lighting causes it to appear as different shades
¡ Need to incorporate: § Light sources
§ Material of object
§ Location of viewer
§ Orientation of surface
3

4

¡ Light is produced at some source and radiates outward
¡ Light strikes object A
§ Some of the light is scattered/reflected
§ Some is absorbed
¡ Some of the scattered
light strikes B
§ Which scatters/absorbs it
¡ Some of that scattered
light strikes A again…
5

¡ There is an infinite cycle of scattering and absorption of light
¡ It can be described by the rendering equation
§ Using integrals and limits the solution can be found
§ However no general solution and numerically solving it is too time intensive
§ Ray tracing is a special case for certain assumptions about the surfaces involved
¡ Rending equation is global however, including: § Shadows
§ Multiple scattering from object to object
6

shadow
multiple reflection translucent surface
7

¡ Real-life shading requires a global calculation involving all objects and light sources simultaneously
§ Incompatible with pipeline which shades each triangle independently
¡ However, usually happy if things “look right” even if not perfect
§ Many techniques for approximating global effects
8

¡ When light strikes an object that light is partially absorbed (usually turns into heat) and partially scattered (reflected)
¡ Each color is not absorbed or reflected by the same amount for different surfaces
§ A red object under white light will look red since it reflects red and absorbs all other colors
¡ The reflected light is scattered in a manner that depends on the smoothness (at an atomic level) and orientation of the surface
9

¡ General/real light sources are difficult to work with because we must consider light coming from a range of points
10

Penumbra
Umbra
11

12

¡ Lighting models heavily use points and vectors so let’s do some vector math review
¡ See “Scalars, Vectors, and Points” document
§ For those of you online I strongly recommend you have this handy
13

¡ Point source – like a light in a room
§ Has position and color
§ Radiates in all directions equally
§ Diminish amount based on distance ¡ Directional source – like the sun
§ Has direction and color
§ Essentially infinitely far away and bright light source
¡ Ambient light
§ Same amount of light everywhere in the scene
§ Used to model contribution of many sources and reflecting surfaces
14

¡ Smoother surfaces mean more reflected light is concentrated in direction a perfect mirror would reflect
¡ A very rough surface scatters light in all directions
Smooth Rough
15

¡ Very simple model that can be computed rapidly ¡ Has three components:
§ Diffuse
§ Specular
§ Ambient
¡ Uses four vectors:
§ Direction to Light source § Direction to Eye
§ Surface Normal
§ Ideal Reflector
16

An ideal reflector has an equivalent angle of incidence and angle of reflection and the light, reflector, and normal vectors are coplanar
!=#−2#⋅” () =(* =cos./ #⋅’
assuming # = ‘ =1
GLSL has reflect(L, N) To compute ! for us
17

¡ Most objects aren’t ideal reflectors (perfect mirrors) ¡ Phong model uses cos of angle $ between % and &
§cos $ =1when$=0(%and&aresamedirection)
§ cos $ decreases when % and & further apart ▪ Actually cos* $ with + > 1 to decrease faster
▪ + is “shininess”
How to efficiently compute cos($)?
18

$ (assuming ! and # are normalized)
!⋅#
¡ Gives a value from 0 to 1 for the proportion
(percent) of the specular light we see* ¡ What else do we need to get the actual
specular light color that we see?
* Technically could be −1 to 1 but we will simply treat negative values as 0
19

$ (assuming ! and # are normalized)
!⋅#
¡ Gives a value from 0 to 1 for the proportion
(percent) of the specular light we see* ¡ What else do we need to get the actual
specular light color that we see? § The color and intensity of the light
§ The color and reflectiveness of the material * Technically could be −1 to 1 but we will simply treat negative values as 0
20

¡ Light (color and intensity): represented as a single color
§ Same for all objects in the scene
▪ Exceptmayhavedistanceincorporated
¡ Material (color, reflectiveness, and shininess): represented as a color plus a shininess scalar
§ Shininess: Metals: 100-200, Plastic: 5-10
§ Usually same for all vertices of entire object
¡ What kind and type of variable in the shader for these?

where !” is specular color/intensity of light, #” is specular
¡Finalequation: !”#” $⋅&
material color/reflectiveness, and ( is shininess
§Bookuses)* for!”,)+ for#”,and,for(butnooneelsedoes
21

¡ Lambertian surfaces are perfectly diffuse
§ Light is scattered equally in all directions
¡ Amount of light reflected is proportional to the
vertical component of incoming light § Called cosine emission law
22

¡ Proportion of reflected light is cos $
§ Another value from 0 to 1 but this time angle $ is
between −( and ) and no shininess factor ¡ How to efficiently compute?
¡ How to use?
23

¡ Final diffuse equation: !”#” −%⋅’
where !” is diffuse color/intensity of light, #” is diffuse material color/reflectiveness
§ Again the book uses () for !”, (* for #”…
24

¡ Most surfaces are neither perfectly specular or diffuse
¡ Smooth surfaces show specular highlights due to
incoming light being reflected in directions concentrated close to the direction of a perfect reflection
specular highlight
25

¡ Simply add the two results together
§ This can result in having more than 100% red, green, and/or blue color – think “blinding light”
▪ GLSL will automatically fix colors but “clamping” all values to the0to1range
▪ Clampmeansif<0makesit0andif>1makesit1
¡ Combination equation:
/
$%&% −(⋅* +$,&, -⋅.
with – = re3lect (, * and normalized (, *, . vectors
26

¡ Ambient light is the result of multiple interactions between (large) light sources and the objects in the environment
§ This is a “hack” to overcome limitations of the pipeline architecture of OpenGL
¡ Still have a light color/intensity and material color/reflectiveness but no scaling
¡ Final ambient equation: !” #”
27

¡ Phong Reflection Model using the specular, diffuse, and ambient components
¡ Final equation:
!”#” +!%#% −’⋅) +!*#* +⋅,
– ‘, ), and , are normalized
+ = re1lect ‘, )
28

¡ !”, !#, !$ – light color/intensity
§ Determined by the type of light we want
§ Most lights we have in the world are (off-)white ▪ Sometimesabitblueroryellower(warmer)
¡ %”, %#, %$, & – material color/reflectance and shininess
§ Determined by the material of the object we want
§ Typically:
▪ %# will be adjusted the most based on color of object
▪ %” is dark version of %# (low amount of ambient)
▪ %$ is a shade of white/gray (regardless of actual object color)
§ In many cases we will simply use pure, bright, white for all 3 of these
29


¡ Need to get ‘, ), and , vectors
§ Also need to normalize them but that is easy
!”#” +!%#% −’⋅) +!*#* +⋅, + = re1lect ‘, )
30

¡ The “normal vector” is perpendicular to a surface
§ Frequently just called the normal
¡ Determined by the right-hand-rule
§ Have the fingers of your right hand follow the vertices around a triangle your thumb is the normal
▪ Counter-clockwise around triangle
§ Mathematically this is the cross product of two vectors
31

Using the right-hand rule, is the normal of the triangle !”# in or out of the screen?
What about triangle !#”?

!
#
32

To do this mathematically, need to get the vectors $ = ” − ! and ‘ = # − ! and the take the cross product: $×’

! $

If doing triangle !#” then $ = # − ! and ‘ = ” − ! instead and normal would flip
#
33

¡ That allows us to compute the normal of a triangle, but our vertex shader works on vertices and we can only point attributes to vertices
¡ For vertices we take the sum (or average) of the normals of all triangles that share that vertex
¡ Since the normal for a single vertex is dependent on many vertices, where
must this be computed?
What kind and type of
shader variable?
34

¡ ! is the direction light is travelling when it reaches the vertex/surface
§Pointlight:point”withlightat”# has!=”−”#
§ Directional light: ! is direction of light source ▪ No work needed!
35

¡ ! is the direction from the vertex/surface to the eye (i.e. the viewer/camera)
§ OpenGL camera is always at 0,0,0 thus if we are at point$then!= 0,0,0 −$=−$
36


+ = re1lect ‘, ) ‘ = 6 − 67 , = −6
!”#” +!%#% −’⋅) +!*#* +⋅,
¡ Uniforms:
§ !”, !%, !* – lighting properties (each avec3)
§ #”, #%, #* – material properties (each avec3)
§ 8 – material shininess (float)
§ 67 – position of light (vec3)
▪ Forflexibilitycanuseavec4withwas1forapointsourceand0
for a directional source and then adjust ‘ based on that ¡ Attributes:
§ 6 – vertex position (vec4 with w as 1) § ) – vertex normal (vec3)
37

38

¡ Flat:
§ Each triangle is a single, solid, color – lighting it applied per
triangle (if at all)
§ Can be computed in JS or vertex shader
¡ Gouraud:
§ Calculate colors/lighting for each vertex in vertex shader and let them interpolate across the polygons
¡ Phong:
§ Calculate vectors in the vertex shader and let them interpolate
across the polygon
§ Calculate the actual color/lighting per-fragment in the fragment shader
¡ What do you think are the advantages/disadvantages of each?
39

¡ Flat:
§ Fastest
§ Each polygon is noticeable ¡ Gouraud:
§ Fastest
§ Specular highlights look bad, otherwise lighting is okay
¡ Phong:
§ Slowest
§ Usually highest quality but can lose sharpness of corners
▪ Sincevectorsareinterpolatedacrosstheshapeandthenormal along edges are angled
40

How to fix this situation?
41

¡ Can duplicate every vertex and have vertices with the same position but a different normal
§ For any object that we want “smooth” surfaces this won’t be necessary (and actually counterproductive)
§ For sharp object we need to do this – this means limited ability reuse vertices in IBOs / triangle strips
42

!”#” −%⋅’ % = ) − )*
¡ Uniforms:
§ !” – diffuse lighting (vec3) – name uLightDiffuse
§ #” – diffuse material (vec3) – name uMaterialDiffuse
§ )* – position of light (vec4) – name uLight ▪ w=1 for a point source and 0 for a directional source
¡ Attributes:
§ ) – vertex position (vec4, w=1) – named aPosition and P
§ ‘ – vertex normal (vec3) – named aNormal
¡ Use Phong Shading: vectors are computed in vertex shader and
sent to the fragment shader where all other calculations are done § Need to be normalized in the fragment shader
43

¡ Technically our current model can produce the diffuse coefficient from -1 to 1
§ Only 0 to 1 makes sense §If less than 0 just set to 0
44

!”#”+!%#% −’⋅) ‘ = + − +,
¡ Uniforms:
§ !” , !% – lighting properties (each a vec3)
§ #” , #% – material properties (each a vec3) § +, – position of light (vec3)
¡ Attributes:
§ + – vertex position (vec4, w=1) – named
aPosition and P
§ ) – vertex normal (vec3)
45


+ = re1lect ‘, ) ‘ = 6 − 67 , = −6
!”#” +!%#% −’⋅) +!*#* +⋅,
¡ Uniforms:
§ !” , !% , !* – lighting properties (each a vec3)
§ #” , #% , #* – material properties (each a vec3)
§ 8 – material shininess (float) – name uMaterialShininess
§ 67 – position of light (vec3) ¡ Attributes:
§ 6 – vertex position (vec4 with w as 1)
§ ) – vertex normal (vec3)
¡ Note: + vector is computed in fragment shader
46

¡ Currently the position of the light is fixed in the init() function
§ Add three number boxes to control the position of the light
§ Add event handlers for them
§ Add default values in init()
47

¡ With a very simple piece of code we can support both light direction and light position
§ Our vec4 for the light will use w=1 meaning it is a point light and w=0 meaning it is a directional light
▪ This matches with the definitions on your sheet, w=0 means a vector, i.e. a direction
¡ Previously we had ! = # − #% to compute the light direction from a point light (i.e. if w=1), if w=0 what should we do instead?
48

¡ With a very simple piece of code we can support both light direction and light position
§ Our vec4 for the light will use w=1 meaning it is a point light and w=0 meaning it is a directional light
▪ This matches with the definitions on your sheet, w=0 means a vector, i.e. a direction
¡ Previously we had ! = # − #% to compute the light direction from a point light (i.e. if w=1), if w=0 what should we do instead?
! = &!'(h*. ,-.
¡ Add this to the shaders and add a checkbox to the HTML to control if light is a point or direction
49

¡ In the real world amount of light is proportional to the square of the distance to the light source:
!~ 1 $%
§ However real world lights also also not point sources
¡ Use the following to reduce effects of a point light source:
1
& + ($ + )$%
§ This is applied to the diffuse and specular terms
§ Why not the ambient term?
¡ Add this into the shaders where $ is the distance between
the position and the light and &, (, and ) are constants given by the user (need some more HTML controls)
50

¡ When using real-world values of 0,0,1 for the attenuation coefficients $, %, & how far away can you get before the light is gone?
51

¡ When using real-world values of 0,0,1 for the attenuation coefficients $, %, & how far away can you get before the light is gone?
¡ We need a much stronger light!
§ The color vec3(1.0, 1.0, 1.0) represents the
strongest white light your monitor can produce ▪ Can your monitor light up a room or the outdoors?
§ We can have light that has values greater than 1.0! ▪ Monitor:50−300&*/,-
▪ OfficeSpace:1500&*/,-
▪ Sun: 1.6×101 &*/,-
52

53

¡ Using “smooth” shading since the normals are smoothly interpolated between the vertices
§ This is typically what we want as it allows us to using less faces to render a smooth surface
¡ However, legitimate sharp edges have an unrealistic bending of light
§ We can accomplish flat shading in 3 ways:
▪ Duplicateourvertices,eachwithadifferentnormal
▪ Bad due to duplicated vertices (this is the current solution in demo)
▪ TellOpenGLtouseflatshading
▪ Very tricky to get right but is possible
▪ Computethenormalsinthefragmentshader:
▪ Use the derivative of the position to get two tangents to the surface ▪ Use cross product to get normal from tangents
54

55

¡ The specular term in the Phong model is problematic because it requires the calculation of a new reflection vector and view vector for each vertex
¡ Blinn suggested an approximation using the halfway vector that is more efficient
56

! is unit vector halfway between ” and #
“+# “+#

(
!=
Note that 2’ = ( if vectors are coplanar
57

¡Replace !⋅# $ with %⋅& ‘
¡ Have to chose a new ( that gives us the same
results as the old ) (if ( is given the same value as ) the specular highlights will be smaller)
¡ Resulting model is known as the modified Phong or Phong-Blinn lighting model
58

59

¡ Lets write calc_normal(verts, inds) which calculates the normals for each vertex
¡ Process:
§ Start with all normals as <0,0,0>
§ Calculate the normal of each triangle and add this to each vertex’s normal
§ Normalize all normals
60

¡ Start with the unlit-cube example
§ Draws a solid-colored cube using an element array and a
triangle-strip
▪ Colorcanbechangedbyuser
▪ Alsoincludesatetrahedronfunctionforelementarraytriangle-strip tetrahedron
§ Has all features of rotating-cube-perspective
§ Includes the full calc_normals function
¡ After we have all vertices and indices we get the array of
normals with calc_normals
¡ Each vertex will have a normal associated with it
§ How do we associate a new value with each vertex?
§ How does the vertex shader give its value to the fragment shader?
61

¡ We just need a new parameter for !”
§ Make a new range or number input:
▪ Initial value of 0.2
▪ Goes from 0.0 to 1.0 with a step of 0.05 and ▪ Hasalabelofka
§ Add a listener for it in the JS code that will send the value of !” to the fragment shader when changed
¡ For the moment the light and object material colors will be the same for all of ambient, diffuse, and specular lighting
62

¡ Should the light move with the box or not? Depends on the situation!
§ What I am rotating/scaling/translating? Just the box or the entire world including the light?
¡ Model-view only applies to box:
L = light_src;
if (light_src.w == 1.0) L -= model_view*vPos;
L = normalize(L);
¡ Model-view applies to entire world:
L = model_view*light_src;
if (light_src.w == 1.0) L -= model_view*vPos;
L = normalize(L);
¡ We could embed this in an if with a uniform bool
63

¡ Some starting points:
§ What happens when you put a point light inside the box?
§ What happens when you translate/scale the box with a direction vs point light?
§ Can you create unrealistic views with light going where it shouldn’t?
§ How does the distance of a point light source effect the lighting of the cube?
§ Can your material color and light color both be bright but the box still be black?
§ What amount of shininess is actually making a difference?
64

¡ A few problems:
§ Light “bends” around sharp edges due to
interpolation of normal across face
§ Light intensity doesn’t diminish with distance realistically
§ Specular light isn’t as pronounced as it maybe should be
65

¡ Check out flat shading in the latest code
¡ Compare effects of flat shading on diffuse vs.
specular lighting § Explain
66

¡ Many systems:
§ Allow the material color to be different for specular, diffuse, and ambient light
▪ We did fix the material color of specular to the light color but otherwise they are the same
§ Allow light color/brightness to be different for specular, diffuse, and ambient light
▪ Would fix some issues we are having with brightness and ambient light with the current setup
67

¡ Sometimes the goal is to not look real!
§ Maybe we want to be like a cartoon
¡ We can add a black outline by finding locations where the surface normal is
perpendicular to the viewer direction
¡ We can “posterize” our shading by lighting up
areas higher than a specific value and leaving things the same that are below that
68