CSCI 445: Computer Graphics

Home , Scaling (geometry), Viewing frustum

Qing Wang Assistant Professor at Computer Science Program The University of Tennessee at Martin

Angel and Shreiner: Interactive Computer Graphics 7E © 1 Addison-Wesley 2015 Classical Viewing

Angel and Shreiner: Interactive Computer Graphics 7E © 2 Addison-Wesley 2015 Objectives • Introduce the classical views • Compare and contrast image formation by computer with how images have been formed by architects, artists, and engineers • Learn the benefits and drawbacks of each type of view

Angel and Shreiner: Interactive Computer Graphics 7E © 3 Addison-Wesley 2015 Classical Viewing • Viewing requires three basic elements • One or more objects • A viewer with a projection surface • Projectors that go from the object(s) to the projection surface • Classical views are based on the relationship among these elements • The viewer picks up the object and orients it how she would like to see it • Each object is assumed to constructed from flat principal faces • Buildings, polyhedra, manufactured objects

Angel and Shreiner: Interactive Computer Graphics 7E © 4 Addison-Wesley 2015 Planar Geometric Projections • Standard projections project onto a plane • Projectors are lines that either • converge at a center of projection • are parallel • Such projections preserve lines • but not necessarily angles • Nonplanar projections are needed for applications such as map construction

Angel and Shreiner: Interactive Computer Graphics 7E © 5 Addison-Wesley 2015 Classical Projections

Angel and Shreiner: Interactive Computer Graphics 7E © 6 Addison-Wesley 2015 Perspective vs Parallel • Computer graphics treats all projections the same and implements them with a single pipeline • Classical viewing developed different techniques for drawing each type of projection • Fundamental distinction is between parallel and perspective viewing even though mathematically parallel viewing is the limit of perspective viewing

Angel and Shreiner: Interactive Computer Graphics 7E © 7 Addison-Wesley 2015 Taxonomy of Planar Geometric Projections planar geometric projections

parallel perspective

1 point 2 point 3 point multiview axonometric oblique orthographic

isometric dimetric trimetric

Angel and Shreiner: Interactive Computer Graphics 7E © 8 Addison-Wesley 2015 Perspective Projection

Angel and Shreiner: Interactive Computer Graphics 7E © 9 Addison-Wesley 2015 Parallel Projection

Angel and Shreiner: Interactive Computer Graphics 7E © 10 Addison-Wesley 2015 Orthographic Projection Projectors are orthogonal to projection surface

Angel and Shreiner: Interactive Computer Graphics 7E © 11 Addison-Wesley 2015 Multiview Orthographic Projection • Projection plane parallel to principal face • Usually form front, top, side views

isometric (not multiview orthographic view) front

in CAD and architecture, we often display three multiviews plus isometric side top

Angel and Shreiner: Interactive Computer Graphics 7E © 12 Addison-Wesley 2015 Advantages and Disadvantages • Preserves both distances and angles • Shapes preserved • Can be used for measurements • Building plans • Manuals • Cannot see what object really looks like because many surfaces hidden from view • Often we add the isometric

Angel and Shreiner: Interactive Computer Graphics 7E © 13 Addison-Wesley 2015 Axonometric Projections Allow projection plane to move relative to object classify by how many angles of a corner of a projected cube are the same q 1 none: trimetric q 2 q 3 two: dimetric three: isometric

Angel and Shreiner: Interactive Computer Graphics 7E © 14 Addison-Wesley 2015 Types of Axonometric Projections

Angel and Shreiner: Interactive Computer Graphics 7E © 15 Addison-Wesley 2015 Advantages and Disadvantages • Lines are scaled (foreshortened) but can find scaling factors • Lines preserved but angles are not • Projection of a circle in a plane not parallel to the projection plane is an ellipse • Can see three principal faces of a box-like object • Some optical illusions possible • Parallel lines appear to diverge • Does not look real because far objects are scaled the same as near objects • Used in CAD applications

Angel and Shreiner: Interactive Computer Graphics 7E © 16 Addison-Wesley 2015 Oblique Projection Arbitrary relationship between projectors and projection plane

Angel and Shreiner: Interactive Computer Graphics 7E © 17 Addison-Wesley 2015 Advantages and Disadvantages • Can pick the angles to emphasize a particular face • Architecture: plan oblique, elevation oblique • Angles in faces parallel to projection plane are preserved while we can still see “around” side

• In physical world, cannot create with simple camera; possible with bellows camera or special lens (architectural)

Angel and Shreiner: Interactive Computer Graphics 7E © 18 Addison-Wesley 2015 Perspective Projection Projectors coverge at center of projection

Angel and Shreiner: Interactive Computer Graphics 7E © 19 Addison-Wesley 2015 Vanishing Points • Parallel lines (not parallel to the projection plan) on the object converge at a single point in the projection (the vanishing point) • Drawing simple perspectives by hand uses these vanishing point(s)

vanishing point

Angel and Shreiner: Interactive Computer Graphics 7E © 20 Addison-Wesley 2015 Three-Point Perspective • No principal face parallel to projection plane • Three vanishing points for cube

Angel and Shreiner: Interactive Computer Graphics 7E © 21 Addison-Wesley 2015 Two-Point Perspective • On principal direction parallel to projection plane • Two vanishing points for cube

Angel and Shreiner: Interactive Computer Graphics 7E © 22 Addison-Wesley 2015 One-Point Perspective • One principal face parallel to projection plane • One vanishing point for cube

Angel and Shreiner: Interactive Computer Graphics 7E © 23 Addison-Wesley 2015 Advantages and Disadvantages • Objects further from viewer are projected smaller than the same sized objects closer to the viewer (diminution) • Looks realistic • Equal distances along a line are not projected into equal distances (nonuniform foreshortening) • Angles preserved only in planes parallel to the projection plane • More difficult to construct by hand than parallel projections (but not more difficult by computer)

Angel and Shreiner: Interactive Computer Graphics 7E © 24 Addison-Wesley 2015 Computer Viewing Positioning the Camera

Angel and Shreiner: Interactive Computer Graphics 7E © 25 Addison-Wesley 2015 Objectives • Introduce the mathematics of projection • Introduce WebGL viewing functions in MV.js • Look at alternate viewing APIs

Angel and Shreiner: Interactive Computer Graphics 7E © 26 Addison-Wesley 2015 From the Beginning • In the beginning: • fixed function pipeline • Model-View and Projection Transformation • Predefined frames: model, object, camera, clip, ndc, window • After deprecation • pipeline with programmable shaders • no transformations • clip, ndc window frames • MV.js reintroduces original capabilities

Angel and Shreiner: Interactive Computer Graphics 7E © 27 Addison-Wesley 2015 Computer Viewing • There are three aspects of the viewing process, all of which are implemented in the pipeline, • Positioning the camera • Setting the model-view matrix • Selecting a lens • Setting the projection matrix • Clipping • Setting the view volume

Angel and Shreiner: Interactive Computer Graphics 7E © 28 Addison-Wesley 2015 The WebGL Camera • In WebGL, initially the object and camera frames are the same • Default model-view matrix is an identity • The camera is located at origin and points in the negative z direction • WebGL also specifies a default view volume that is a cube with sides of length 2 centered at the origin • Default projection matrix is an identity

Angel and Shreiner: Interactive Computer Graphics 7E © 29 Addison-Wesley 2015 Default Projection Default projection is orthogonal

clipped out

z=0

Angel and Shreiner: Interactive Computer Graphics 7E © 30 Addison-Wesley 2015 Moving the Camera Frame • If we want to visualize objects with both positive and negative z values we can either • Move the camera in the positive z direction • Translate the camera frame • Move the objects in the negative z direction • Translate the world frame • Both of these views are equivalent and are determined by the modelview matrix • Want a translation (translate(0.0,0.0,-d);) • d > 0

Angel and Shreiner: Interactive Computer Graphics 7E © 31 Addison-Wesley 2015 Moving Camera back from Origin frames after translation by –d d > 0 default frames

Angel and Shreiner: Interactive Computer Graphics 7E © 32 Addison-Wesley 2015 Moving the Camera • We can move the camera to any desired position by a sequence of rotations and translations • Example: side view • Rotate the camera • Move it away from origin • Model-view matrix C = TR

Angel and Shreiner: Interactive Computer Graphics 7E © 33 Addison-Wesley 2015 WebGL code • Remember that last transformation specified is first to be applied

// Using MV.js

var t = translate (0.0, 0.0, -d); var ry = rotateY(90.0); var m = mult(t, ry);

var m = mult(translate (0.0, 0.0, -d), rotateY(90.0););

Angel and Shreiner: Interactive Computer Graphics 7E © 34 Addison-Wesley 2015 lookAt LookAt(eye, at, up)

Angel and Shreiner: Interactive Computer Graphics 7E © 35 Addison-Wesley 2015 The lookAt Function • The GLU library contained the function gluLookAt to form the required modelview matrix through a simple interface • Note the need for setting an up direction • Replaced by lookAt() in MV.js • Can concatenate with modeling transformations • Example: isometric view of cube aligned with axes

var eye = vec3(1.0, 1.0, 1.0); var at = vec3(0.0, 0.0, 0.0); var up = vec3(0.0, 1.0, 0.0);

var mv = LookAt(eye, at, up);

Angel and Shreiner: Interactive Computer Graphics 7E © 36 Addison-Wesley 2015 Other Viewing APIs • The LookAt function is only one possible API for positioning the camera • Others include • View reference point, view plane normal, view up (PHIGS, GKS-3D) • Yaw, pitch, roll • Elevation, azimuth, twist • Direction angles

Angel and Shreiner: Interactive Computer Graphics 7E © 37 Addison-Wesley 2015 Computer Viewing Projection

Angel and Shreiner: Interactive Computer Graphics 7E © 38 Addison-Wesley 2015 Objectives • Introduce the mathematics of projection • Add WebGL projection functions in MV.js

Angel and Shreiner: Interactive Computer Graphics 7E © 39 Addison-Wesley 2015 Projections and Normalization • The default projection in the eye (camera) frame is orthogonal • For points within the default view volume xp = x yp = y zp = 0 • Most graphics systems use view normalization • All other views are converted to the default view by transformations that determine the projection matrix • Allows use of the same pipeline for all views

Angel and Shreiner: Interactive Computer Graphics 7E © 40 Addison-Wesley 2015 Homogeneous Coordinate Representation default orthographic projection

xp = x pp = Mp yp = y zp = 0 wp = 1 1 0 0 0 0 1 0 0 M =   0 0 0 0   0 0 0 1

In practice, we can let M = I and set the z term to zero later

Angel and Shreiner: Interactive Computer Graphics 7E © 41 Addison-Wesley 2015 Simple Perspective • Center of projection at the origin • Projection plane z = d, d < 0

Angel and Shreiner: Interactive Computer Graphics 7E © 42 Addison-Wesley 2015 Perspective Equations Consider top and side views

x y xp = yp = z = d z / d z / d p

Angel and Shreiner: Interactive Computer Graphics 7E © 43 Addison-Wesley 2015 Homogeneous Coordinate Form 1 0 0 0   consider p = Mq where M = 0 1 0 0 0 0 1 0   0 0 1/ d 0 x  x     y y q =    p =    z  z      z / d 1  

Angel and Shreiner: Interactive Computer Graphics 7E © 44 Addison-Wesley 2015 Perspective Division • However w  1, so we must divide by w to return from homogeneous coordinates • This perspective division yields x y xp = yp = zp = d z / d z / d the desired perspective equations • We will consider the corresponding clipping volume with mat.h functions that are equivalent to deprecated OpenGL functions

Angel and Shreiner: Interactive Computer Graphics 7E © 45 Addison-Wesley 2015 WebGL Orthogonal Viewing ortho(left,right,bottom,top,near,far)

near and far measured from camera

Angel and Shreiner: Interactive Computer Graphics 7E © 46 Addison-Wesley 2015 WebGL Perspective frustum(left,right,bottom,top,near,far)

Angel and Shreiner: Interactive Computer Graphics 7E © 47 Addison-Wesley 2015 Using Field of View • With frustum it is often difficult to get the desired view • perspective(fovy, aspect, near, far) often provides a better interface

front plane

aspect = w/h

Angel and Shreiner: Interactive Computer Graphics 7E © 48 Addison-Wesley 2015 Computing Matrices • Compute in JS file, send to vertex shader with gl.uniformMatrix4fv • Dynamic: update in render() or shader

Angel and Shreiner: Interactive Computer Graphics 7E © 49 Addison-Wesley 2015 persepctive2.js var render = function(){ gl.clear( gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

eye = vec3(radius*Math.sin(theta)*Math.cos(phi), radius*Math.sin(theta)*Math.sin(phi), radius*Math.cos(theta));

modelViewMatrix = lookAt(eye, at , up); projectionMatrix = perspective(fovy, aspect, near, far);

gl.uniformMatrix4fv( modelViewMatrixLoc, false, flatten(modelViewMatrix) ); gl.uniformMatrix4fv( projectionMatrixLoc, false, flatten(projectionMatrix) );

gl.drawArrays( gl.TRIANGLES, 0, NumVertices );

requestAnimFrame(render);

} Angel and Shreiner: Interactive Computer Graphics 7E © 50 Addison-Wesley 2015 vertex shader attribute vec4 vPosition; attribute vec4 vColor; varying vec4 fColor; uniform mat4 modelViewMatrix; uniform mat4 projectionMatrix; void main() { gl_Position = projectionMatrix*modelViewMatrix*vPosition; fColor = vColor; }

Angel and Shreiner: Interactive Computer Graphics 7E © 51 Addison-Wesley 2015 The Virtual Trackball

Angel and Shreiner: Interactive Computer Graphics 7E © 52 Addison-Wesley 2015 Objectives • This is an optional lecture that • Introduces the use of graphical (virtual) devices that can be created using WebGL • Reinforce the benefit of not using direction angles and Euler angles • Makes use of transformations • Leads to reusable code that will be helpful later

Angel and Shreiner: Interactive Computer Graphics 7E © 53 Addison-Wesley 2015 Physical Trackball • The trackball is an “upside down” mouse

• If there is little friction between the ball and the rollers, we can give the ball a push and it will keep rolling yielding continuous changes • Two possible modes of operation • Continuous pushing or tracking hand motion • Spinning

Angel and Shreiner: Interactive Computer Graphics 7E © 54 Addison-Wesley 2015 A Trackball from a Mouse • Problem: we want to get the two behavior modes from a mouse • We would also like the mouse to emulate a frictionless (ideal) trackball • Solve in two steps • Map trackball position to mouse position • Use event listeners to handle the proper modes

Angel and Shreiner: Interactive Computer Graphics 7E © 55 Addison-Wesley 2015 Using Quaternions • Quaternion arithmetic works well for representing rotations around the origin • Can use directly avoiding rotation matrices in the virtual trackball • Code was made available long ago (pre shader) by SGI • Quaternion shaders are simple

Angel and Shreiner: Interactive Computer Graphics 7E © 56 Addison-Wesley 2015 Trackball Frame

origin at center of ball

Angel and Shreiner: Interactive Computer Graphics 7E © 57 Addison-Wesley 2015 Projection of Trackball Position • We can relate position on trackball to position on a normalized mouse pad by projecting orthogonally onto pad

Angel and Shreiner: Interactive Computer Graphics 7E © 58 Addison-Wesley 2015 Reversing Projection • Because both the pad and the upper hemisphere of the ball are two- dimensional surfaces, we can reverse the projection • A point (x,z) on the mouse pad corresponds to the point (x,y,z) on the upper hemisphere where

y = r2  x2 z2 if r  |x| 0, r  |z|  0

Angel and Shreiner: Interactive Computer Graphics 7E © 59 Addison-Wesley 2015 Computing Rotations • Suppose that we have two points that were obtained from the mouse.

• We can project them up to the hemisphere to points p1 and p2 • These points determine a great circle on the sphere

• We can rotate from p1 to p2 by finding the proper axis of rotation and the angle between the points

Angel and Shreiner: Interactive Computer Graphics 7E © 60 Addison-Wesley 2015 Using the cross product • The axis of rotation is given by the normal to the plane determined by the origin, p1 , and p2

n = p1  p2

Angel and Shreiner: Interactive Computer Graphics 7E © 61 Addison-Wesley 2015 Obtaining the angle

• The angle between p1 and p2 is given by | n | | sin q| = | p1 || p2 |

• If we move the mouse slowly or sample its position frequently, then q will be small and we can use the approximation

sin q  q

Angel and Shreiner: Interactive Computer Graphics 7E © 62 Addison-Wesley 2015 Implementing with WebGL • Define actions in terms of three Booleans

• trackingMouse: if true update trackball position

• redrawContinue: if true, idle function posts a redisplay

• trackballMove: if true, update rotation matrix

Angel and Shreiner: Interactive Computer Graphics 7E © 63 Addison-Wesley 2015 Vertex Shader I in vec4 vPosition; in vec4 vColor; out vec4 color; uniform vec4 rquat; // rotation quaternion

// quaternion multiplier vec4 multq(vec4 a, vec4 b) { return(vec4(a.x*b.x - dot(a.yzw, b.yzw), a.x*b.yzw+b.x*a.yzw+cross(b.yzw, a.yzw))); }

Angel and Shreiner: Interactive Computer Graphics 7E © 64 Addison-Wesley 2015 Vertex Shader II // inverse quaternion vec4 invq(vec4 a) { return(vec4(a.x, -a.yzw)/dot(a,a)); }

void main() { vec3 axis = rquat.yxw; float theta = rquat.x; vec4 r, p; p = vec4(0.0, vPosition.xyz); // input point quaternion p = multq(rquat, multq(p, invq(rquat))); // rotated point quaternion gl_Position = vec4( p.yzw, 1.0); // back to homogeneous coordinates color = vColor; }

Angel and Shreiner: Interactive Computer Graphics 7E © 65 Addison-Wesley 2015 Orthogonal Projection Matrices

Angel and Shreiner: Interactive Computer Graphics 7E © 66 Addison-Wesley 2015 Objectives • Derive the projection matrices used for standard orthogonal projections • Introduce oblique projections • Introduce projection normalization

Angel and Shreiner: Interactive Computer Graphics 7E © 67 Addison-Wesley 2015 Normalization • Rather than derive a different projection matrix for each type of projection, we can convert all projections to orthogonal projections with the default view volume • This strategy allows us to use standard transformations in the pipeline and makes for efficient clipping

Angel and Shreiner: Interactive Computer Graphics 7E © 68 Addison-Wesley 2015 Pipeline View

modelview projection perspective transformation transformation division 4D  3D nonsingular

clipping projection

against default cube 3D  2D

Angel and Shreiner: Interactive Computer Graphics 7E © 69 Addison-Wesley 2015 Notes • We stay in four-dimensional homogeneous coordinates through both the modelview and projection transformations • Both these transformations are nonsingular • Default to identity matrices (orthogonal view) • Normalization lets us clip against simple cube regardless of type of projection • Delay final projection until end • Important for hidden-surface removal to retain depth information as long as possible

Angel and Shreiner: Interactive Computer Graphics 7E © 70 Addison-Wesley 2015 Orthogonal Normalization ortho(left,right,bottom,top,near,far)

normalization  find transformation to convert specified clipping volume to default

Angel and Shreiner: Interactive Computer Graphics 7E © 71 Addison-Wesley 2015 Orthogonal Matrix • Two steps • Move center to origin T(-(left+right)/2, -(bottom+top)/2,(near+far)/2)) • Scale to have sides of length 2 S(2/(right-left),2/(top-bottom),2/(near-far))

 2 right  left  0 0   right  left right  left    2 top  bottom  0 0   P = ST =  top  bottom top  bottom   2 far  near  0 0  near  far far  near     0 0 0 1 

Angel and Shreiner: Interactive Computer Graphics 7E © 72  Addison-Wesley 2015 Final Projection • Set z =0 • Equivalent to the homogeneous coordinate transformation

1 0 0 0 0 1 0 0 M =   orth 0 0 0 0   0 0 0 1 • Hence, general orthogonal projection in 4D is

P = MorthST

Angel and Shreiner: Interactive Computer Graphics 7E © 73 Addison-Wesley 2015 Oblique Projections • The OpenGL projection functions cannot produce general parallel projections such as

• However if we look at the example of the cube it appears that the cube has been sheared • Oblique Projection = Shear + Orthogonal Projection

Angel and Shreiner: Interactive Computer Graphics 7E © 74 Addison-Wesley 2015 General Shear

top view side view

Angel and Shreiner: Interactive Computer Graphics 7E © 75 Addison-Wesley 2015 Shear Matrix xy shear (z values unchanged) 1 0  cotθ 0   H(q,f) = 0 1  cotφ 0 0 0 1 0   0 0 0 1 Projection matrix

P = M H(q,f) General case: orth

P = Morth STH(q,f)

Angel and Shreiner: Interactive Computer Graphics 7E © 76 Addison-Wesley 2015 Equivalency

Angel and Shreiner: Interactive Computer Graphics 7E © 77 Addison-Wesley 2015 Effect on Clipping • The projection matrix P = STH transforms the original clipping volume to the default clipping volume

object top view z = 1

DOP DOP x = -1 far plane x = 1 z = -1 clipping near plane volume distorted object (projects correctly)

Angel and Shreiner: Interactive Computer Graphics 7E © 79 Addison-Wesley 2015 Objectives • Derive the perspective projection matrices used for standard WebGL projections

Angel and Shreiner: Interactive Computer Graphics 7E © 80 Addison-Wesley 2015 Simple Perspective Consider a simple perspective with the COP at the origin, the near clipping plane at z = -1, and a 90 degree field of view determined by the planes x = z, y = z

Angel and Shreiner: Interactive Computer Graphics 7E © 81 Addison-Wesley 2015 Perspective Matrices Simple projection matrix in homogeneous coordinates 1 0 0 0 0 1 0 0 M =   0 0 1 0   0 0 1 0 Note that this matrix is independent of the far clipping plane

Angel and Shreiner: Interactive Computer Graphics 7E © 82 Addison-Wesley 2015 Generalization 1 0 0 0 0 1 0 0 N =   0 0 α β   0 0 1 0

after perspective division, the point (x, y, z, 1) goes to x’’ = - x/z y’’ = - y/z z’’ = -(a+b/z) which projects orthogonally to the desired point regardless of a and b

Angel and Shreiner: Interactive Computer Graphics 7E © 83 Addison-Wesley 2015 Picking α and β If we pick near  far a = far  near 2near far b = - near  far

the near plane is mapped to z’’ = -1 the far plane is mapped to z’’ =1 and the sides are mapped to x’’ =  1, y’’ =  1

Hence the new clipping volume is the default clipping volume

distorted object projects correctly

original clipping volume original object new clipping volume

Angel and Shreiner: Interactive Computer Graphics 7E © 85 Addison-Wesley 2015 Normalization and Hidden-Surface Removal • Although our selection of the form of the perspective matrices may appear somewhat arbitrary, it was chosen so that if z1 > z2 in the original clipping volume then the for the transformed points z1’ > z2’ • Thus hidden surface removal works if we first apply the normalization transformation • However, the formula z’’ = -(a+b/z) implies that the distances are distorted by the normalization which can cause numerical problems especially if the near distance is small

Angel and Shreiner: Interactive Computer Graphics 7E © 86 Addison-Wesley 2015 WebGL Perspective • gl.frustum allows for an unsymmetric viewing frustum (although gl.perspective does not)

Angel and Shreiner: Interactive Computer Graphics 7E © 87 Addison-Wesley 2015 OpenGL Perspective Matrix • The normalization in Frustum requires an initial shear to form a right viewing pyramid, followed by a scaling to get the normalized perspective volume. Finally, the perspective matrix results in needing only a final orthogonal transformation

P = NSH

our previously defined shear and scale perspective matrix

Angel and Shreiner: Interactive Computer Graphics 7E © 88 Addison-Wesley 2015 Why do we do it this way? • Normalization allows for a single pipeline for both perspective and orthogonal viewing • We stay in four dimensional homogeneous coordinates as long as possible to retain three-dimensional information needed for hidden- surface removal and shading • We simplify clipping

 2* near right  left  0 0  right  left right  left  frustum   2* near top  bottom  0 0  P   top  bottom top  bottom   far  near 2* far* near 0 0    far  near far  near     0 0 1 0 

 near  perspective 0 0 0  right     near  0 0 0  P   top   far  near 2* far * near 0 0    far  near far  near     0 0 1 0 

Angel and Shreiner: Interactive Computer Graphics 7E © 91 Addison-Wesley 2015 Objective Introduce techniques for displaying polygonal meshes

Angel and Shreiner: Interactive Computer Graphics 7E © 92 Addison-Wesley 2015 Meshes • Polygonal meshes are the standard method for defining and displaying surfaces • Approximations to curved surfaces • Directly from CAD packages • Subdivision • Most common are quadrilateral and triangular meshes • Triangle strips and fans

Angel and Shreiner: Interactive Computer Graphics 7E © 93 Addison-Wesley 2015 Height Fields • For each (x, z) there is a unique y • Sampling leads to an array of y values • Display as quadrilateral or triangular mesh using strips

Angel and Shreiner: Interactive Computer Graphics 7E © 95 Addison-Wesley 2015 Plot 3D • Old 2D method uses fact that data are ordered and we can render front to back • Regard each plane of constant z as a flat surface that can block (parts of) planes behind it • Can proceed iteratively maintaining a visible top and visible bottom • Lots of little line intersections • Lots of code but avoids all 3D

sombrero or Mexican hat function (sin πr)/(πr)

Angel and Shreiner: Interactive Computer Graphics 7E © 97 Addison-Wesley 2015 Using Polygons • We can use four adjacent data points to form a quadrilateral and thus two triangles which can be shaded • But what if we want to see the grid? • We can display each quadrilateral twice • First as two filled white triangles • Second as a black line loop

Angel and Shreiner: Interactive Computer Graphics 7E © 99 Addison-Wesley 2015 Polygon Offset • Even though we draw the polygon first followed by the lines, small numerical errors cause some of fragments on the line to be display behind the corresponding fragment on the triangle • Polygon offset (gl.polygonOffset) moves fragments slight away from camera • Apply to triangle rendering

Angel and Shreiner: Interactive Computer Graphics 7E © 101 Addison-Wesley 2015 Other Mesh Issues • How do we construct a mesh from disparate data (unstructured points) • Technologies such as laser scans can produced tens of millions of such points • Chapter 12: Delaunay triangulation • Can we use one triangle strip for an entire 2D mesh? • Mesh simplification

Angel and Shreiner: Interactive Computer Graphics 7E © 103 Addison-Wesley 2015 Objectives • Introduce Shadow Algorithms • Projective Shadows • Shadow Maps • Shadow Volumes

Angel and Shreiner: Interactive Computer Graphics 7E © 104 Addison-Wesley 2015 Flashlight in the Eye Graphics • When do we not see shadows in a real scene? • When the only light source is a point source at the eye or center of projection • Shadows are behind objects and not visible • Shadows are a global rendering issue • Is a surface visible from a source • May be obscured by other objects

Angel and Shreiner: Interactive Computer Graphics 7E © 105 Addison-Wesley 2015 Shadows in Pipeline Renders • Note that shadows are generated automatically by a ray tracers • feeler rays will detect if no light reaches a point • need all objects to be available • Pipeline renderers work an object at a time so shadows are not automatic • can use some tricks: projective shadows • multi-rendering: shadow maps and shadow volumes

Angel and Shreiner: Interactive Computer Graphics 7E © 106 Addison-Wesley 2015 Projective Shadows • Oldest methods • Used in flight simulators to provide visual clues • Projection of a polygon is a polygon called a shadow polygon • Given a point light source and a polygon, the vertices of the shadow polygon are the projections of the original polygon’s vertices from a point source onto a surface

1. Source at (xl, yl, zl) 2. Vertex at (x, y, z) 3. Consider simple case of shadow projected onto ground at (xp, 0, zp)

4. Translate source to origin with T(-xl, -yl, -zl)

5. Perspective projection 1 0 0 0   0 1 0 0 M  0 0 1 0  1  0 0 0 6. Translate back     yl 

Angel and Shreiner: Interactive Computer Graphics 7E © 109 Addison-Wesley 2015  Shadow Process 1. Put two identical triangles and their colors on GPU (black for shadow triangle) 2. Compute two model view matrices as uniforms 3. Send model view matrix for original triangle 4. Render original triangle 5. Send second model view matrix 6. Render shadow triangle • Note shadow triangle undergoes two transformations • Note hidden surface removal takes care of depth issues

Angel and Shreiner: Interactive Computer Graphics 7E © 110 Addison-Wesley 2015 Generalized Shadows • Approach was OK for shadows on a single flat surface • Note with geometry shader we can have the shader create the second triangle • Cannot handle shadows on general objects • Exist a variety of other methods based on same basic idea • We’ll pursue methods based on projective textures

Angel and Shreiner: Interactive Computer Graphics 7E © 111 Addison-Wesley 2015 Image Based Lighting • We can project a texture onto the surface in which case the are treating the texture as a “slide projector” • This technique the basis of projective textures and image based lighting • Supported in desktop OpenGL and GLSL through four dimensional texture coordinates • Not yet in WebGL

Angel and Shreiner: Interactive Computer Graphics 7E © 112 Addison-Wesley 2015 Shadow Maps • If we render a scene from a light source, the depth buffer will contain the distances from the source to nearest lit fragment. • We can store these depths in a texture called a depth map or shadow map • Note that although we don’t care about the image in the shadow map, if we render with some light, anything lit is not in shadow. • Form a shadow map for each source

Angel and Shreiner: Interactive Computer Graphics 7E © 114 Addison-Wesley 2015 Final Rendering • During the final rendering we compare the distance from the fragment to the light source with the distance in the shadow map • If the depth in the shadow map is less than the distance from the fragment to the source the fragment is in shadow (from this source) • Otherwise we use the rendered color

Angel and Shreiner: Interactive Computer Graphics 7E © 115 Addison-Wesley 2015 Implementation • Requires multiple renderings • We will look at render-to-texture later • gives us a method to save the results of a rendering as a texture • almost all work done in the shaders

far clipping plane

shadow volume near clipping plane

COP